php - Jquery mouseover 动画与 get 函数

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

您想要做的一件事是使用该.on()函数附加事件。

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

对 mouseleave 使用相同的方法。一个问题是它不适用于动态 HTML .mouseenter()。.mouseleave()

Answer 2

由于您要替换整个 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();
        } 

    });
 }