我正在制作单独的帖子，我希望帖子在不刷新页面的情况下自动加载，所以我使用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();
});
}
});
由于您要替换整个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();
}
});
}
要做的一件事是使用.on()函数附加事件。
$('body').on('mouseenter','.Lrgposts',function(){ // stuff});
对mouseleave使用相同的方法。.mouseenter()或.mouseleave()的一个问题是它不适用于动态HTML。