Question

我正在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>

Answer 1

我会建议这样的事情：

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);  
});

Answer 2

试试这个：

$(document).ready(function() {
    $(".image").mouseenter(
    function() {
        $("#"+this.id+"info").animate({
            height: '40'
        }, 500);
    });
    $(".image").mouseleave(
    function() {
        $("#"+this.id+"info").animate({
            height: '0'
        }, 500);
    });
});

写上述内容的另一种方法是：

$(document).ready(function() {
  $(".image").hover(
    function() {
      $("#"+this.id+"info").animate({
        height: '40'
      }, 500);
    },
    function() {
      $("#"+this.id+"info").animate({
        height: '0'
      }, 500);
    });
});

基本上我用鼠标进入和退出事件替换了你的悬停事件。我还将完成动画的时间从700毫秒减少到500。

另外，您的源代码需要进行一些修改。您要在标题中导入jquery-ui.min.js，在页面中间导出query.js。您应该在页脚中导入query.js，在ui.min.js后导入query.js。 includes/jquery.inview.js和includes/muny.js的路径也是错误的。

JQuery动画滞后

2 个答案: