Google Chrome中的Jquery动画问题

2023年2月17日 269次阅读

我一直试图重新创建一个我在另一个网站上看到的效果,虽然看起来它主要起作用我在Google Chrome中没有问题.效果是当您将鼠标悬停在图像缩略图上时,它会显示3个图标,这些图标链接到各种选项.

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

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

http://kineticcomplex.com/jquerytest.html

最佳答案 这适用于Chrome12.过去我在Chrome中使用hover()时遇到了一些问题(以及position()).我读过Webkit有时太快了.也许这就是这里发生的事情？在这种情况下,我无法真正看到hover()的问题.但是,在Chrome中使用不同的策略似乎更好.我将类更改为实际的< img>,而不是外部< div>否则动画是在图像周围的空白处开始的,我在动画之前移动了背景阴影,使得高光更快,即不必等待动画开始.

编辑：这可能是Chrome中的浮动错误.如果使用display：inline-block替换.et_pt_gallery_entry中的float：left样式,则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);
    });
});
点赞