Question

我正在制作单独的帖子，我希望自动加载帖子而不刷新页面，所以我使用的是jquery $.get。接下来，如果有人将鼠标移到该帖子上，则div将从左侧动画。但由于帖子每30秒刷新一次，因此鼠标动画不起作用。 div只是眨眼＆amp;隐藏，不留。什么是更好的方式？

这是我的代码-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});

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

Jquery mouseover animate with get function

2 个答案: