Google Chrome 中的 Jquery 动画问题

Question

我一直在尝试重新创建我在另一个网站上看到的效果，虽然它看起来大部分都有效，但我在 Google Chrome 中没有遇到问题。效果是，当您将鼠标悬停在图像缩略图上时，它会出现 3 个链接到各种选项的图标。

当 Chrome 中的缩略图数量多于一个窗口中可见的数量时，就会出现问题。您将鼠标悬停在窗口中的那些上没有问题。不过，如果您向下滚动到最初在窗口中不可见的内容，似乎会出现一些锁定动画的错误。如果您缓慢移动，它效果很好，但较快的移动似乎会在一个缩略图上暂停动画(您不必移动那么快来复制它，我已经在三台不同的机器上尝试过)。如果您将鼠标悬停在可见的位置上，它仍然可以正常工作。如果我最大化窗口，使它们全部可见，那就没问题了。

无论窗口大小如何，所有缩略图都可以在 IE9 和 FF4 中正常工作。我一直在搞乱 .stop 更改 true,false 选项，但这似乎没有太大效果。这是我第一次尝试使用 jquery，而不是使用预先编写的脚本，任何帮助都是值得赞赏的。通过搜索，我发现其他人在使用 Chrome 时遇到了问题，但没有具体的帮助。

http://kineticcomplex.com/jquerytest.html

Answer 1

这对我来说在 Chrome12 中有效。我过去在 hover() 方面遇到过一些问题在 Chrome 中(以及 position() )。我听说 Webkit 有时太快了。 也许这就是这里发生的事情？但在这种情况下，我真的看不出悬停()的问题是什么。然而，在 Chrome 中使用不同的策略似乎更好。 我将类更改为实际的 <img> ，而不是外部<div>否则动画是在图像周围的空白区域开始的，我在动画之前移动了背景阴影以使高光显示更快，即不必等待动画开始。

编辑:这可能是 Chrome 中的一个 float 错误。如果替换 float:left风格在.et_pt_gallery_entry与 display:inline-block然后悬停()起作用。无论如何，我在下面留下了更新的悬停()代码，因为它更干净一些。我尽可能避免 float 。多年来 float 元素存在很多问题!希望这能为您解决问题。

$(function(){
    $('.et_pt_item_image').hover(function(){
        $('.zoom-icon, .more-icon, .map-icon', this).css({opacity:0, visibility:'visible'});
        $('img', this).css({backgroundColor:'#ddd', borderColor:'#bbb'},400);
        $('a.zoom-icon', this).stop().animate({opacity: 1, left: 40}, 400);
        $('a.more-icon', this).stop().animate({opacity: 1, left: 105}, 400);
        $('a.map-icon', this).stop().animate({opacity: 1, left: 170}, 400);
    }, function(){
        $('img', this).css({backgroundColor:'#fff', borderColor:'#e5e5e5'},400);
        $('a.zoom-icon', this).stop().animate({opacity: 0, left: 31}, 400);
        $('a.more-icon', this).stop().animate({opacity: 0, left: 105}, 400);
        $('a.map-icon', this).stop().animate({opacity: 0, left: 180}, 400);
    });
});