Jquery mouseover animate with get function

Question

Я делаю отдельные сообщения, я хочу, чтобы сообщения загружались автоматически без обновления страницы, поэтому я использую jquery $.get. Затем, если кто-то наведет курсор над этим сообщением, div будет анимировать слева. Но поскольку сообщения обновляются каждые 30 секунд, анимация мыши не работает & div просто мигает & шкуры, не останавливается. Какой лучший способ?

Вот мой код -Jquery

// JavaScript Document 
$(document).ready(function(){ 
    $(".sharePosts").hide(); 
    $(".LrgPosts").mouseenter(function() { 
     $(this).find(".sharePosts").show().animate({width: '51px'}, "fast"); 
    }).mouseleave(function(){ 
     $(this).find(".sharePosts").hide().animate({width: '0px'}, "slow"); 
    }); 

    $(function() { 
     refreshEPosts(); 
    }); 

    function refreshEPosts(){ 
     setTimeout(refreshEPosts,30000); 
     $.get('getNewPosts.php', function(data) { 
      $('#leftAlign').html(data).fadeIn();  
     }); 
    } 
}); 

Answer 1

Поскольку вы заменяете весь HTML, шоу и скрыть анимацию вашего DIV только миганием и не остановился. Я думаю, вам следует просто добавлять новые записи в HTML dom вместо полной замены HTML.

// this is just and example, you cant modify with your own code. 

function refreshEPosts(){ 
    setTimeout(refreshEPosts,30000); 
    $.get('getNewPosts.php', function(data) { 

     if(gotNewPost(data)){ 
      var newPostHtml = "<div>" + data + "</div>"; 
      $('#leftAlign').append(newPostHtml).fadeIn(); 
     } 

    }); 
} 

Answer 2

Одна вещь, которую вы хотите сделать, это использовать функцию .on(), чтобы прикрепить событие.

$('body').on('mouseenter','.Lrgposts',function(){ // stuff}); 

Используйте то же самое для мышки. Одна проблема с .mouseenter() или .mouseleave() - это не работает для динамического HTML.