jquery - jQuery动画滞后

我正在为picbox.us网站开发图库，当我将鼠标悬停在图片上时，我会滞后。它应该只是将我的图像信息的高度动画化为40，仅此而已。但有时它会滞后或延迟。这是页面：http://zachrip.net/widgets/gallery/

这是与该问题有关的唯一代码：

jQuery的：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".image").hover(
function () {
$("#" + this.id + "info").animate({height: '40'}, 700);
}
);
$(body).hover(
function(){
    $(".imageinfo").animate({height: '0'}, 700);
}
);
$("#container").hover(
function(){
    $(".imageinfo").animate({height: '0'}, 700);
}
);
});
</script>

HTML：

<div id='container'>
<center>
<p>Beta testing image gallery</p>
<table cellpadding="1" cellspacing="5">
<tr>
<td><center><img class="image" id="1" src="img1.png"/></center><p id="1info" class="imageinfo">Uploaded by muny</p></td>
<td><center><img class="image" id="2" src="img1.png"/></center><p id="2info" class="imageinfo">Uploaded by zachrip</p></td>
<td><center><img class="image" id="3" src="img1.png"/></center><p id="3info"  class="imageinfo">Uploaded by seanrice</p></td>
</tr>
<tr>
</table>
</center>
</div>

最佳答案

我建议这样的事情：

http://jsbin.com/uzucuh/1/edit

$('.imgBox').on('mouseenter mouseleave',function( ev ){
  var mEnt = ev.type=='mouseenter';
  $('span', this).stop().animate({bottom: mEnt? 40 : 0 }, 300);
});

关于jquery - jQuery动画滞后，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13557087/