Question

我一直在努力重新创建我在另一个网站上看到的效果，虽然它看起来很有效但我在谷歌浏览器中没有问题。效果是当您将鼠标悬停在图像缩略图上时，它会显示3个图标，这些图标链接到各种选项。

当缩略图多于一个窗口中可见的缩略图时，问题出现在Chrome中。你将鼠标悬停在窗口中的那些没有问题。虽然如果向下滚动到窗口中最初未显示的那些，但似乎有一些错误可以锁定动画。如果你移动缓慢，它工作正常，但更快的动作似乎暂停一个缩略图上的动画（你不必快速移动复制它，我已经在三台不同的机器上尝试过）。如果你将鼠标悬停在可见的那些上面，它仍能正常工作。如果我最大化窗口以便它们全部可见，那么它就可以了。

无论窗口大小如何，所有缩略图都可以在IE9和FF4中正常工作。我一直在乱搞.stop更改真实的，错误的选项，但似乎没有太大的影响。这是我第一次尝试使用jquery而不是使用预先编写的脚本，任何帮助都表示赞赏。从搜索中我看到其他人对Chrome有问题，但没有任何具体的帮助。

http://kineticcomplex.com/jquerytest.html

Answer 1

您是否尝试过使用不同的鼠标事件，例如mouseenter / leave或mouseover / out？

Answer 2

这适用于Chrome12。我过去在Chrome中使用hover()（以及position()）时遇到了一些问题。我读过Webkit有时太快了。 ~~也许这就是这里发生的事情？在这种情况下，我无法真正看到hover（）的问题。但是在Chrome中使用不同的策略似乎更好。~~我将类更改为实际<img>，而不是外部<div>否则动画从图像周围的空白处开始并且我在动画之前移动了背景阴影以更快地突出显示，即无需等待动画开始。

修改：它可能是Chrome中的 float 错误。如果您将float:left中的.et_pt_gallery_entry样式替换为display:inline-block，则hover（）会起作用。无论如何，我已经将更新的hover（）代码保留在下面，因为它有点清洁。尽可能避免浮动。这些年来浮动元素有很多问题！希望这能为你解决这个问题。

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

Google Chrome中的Jquery动画问题

2 个答案: