jQuery 开发站点和 wordpress 站点上的动画不同行为

Question

我正在制作一个只有 3 个对象的简单动画。当我在普通页面上制作这个动画时，效果很好。当我将它转移到 Wordpress 模板时，动画似乎排队并且运行一次一个

我试过 This S.O. Solution 但没用。

所需的行为是 Here。当您将鼠标悬停在图像上时，您悬停在其上的图像（如果它不是 #1）会与其他 'getting out of the way' 图像同时进行动画处理。

不正确的行为是 Here。如您所见，当您将鼠标悬停在图像上时，未悬停在其上的幻灯片会先进行动画处理，然后您拥有的幻灯片 'selected' 会悬停到正确的位置。

问题是"then"。所有这些图块都应同时设置动画。

这里是 jQuery:

var speed = 500,
    ease  = "easeInOutCirc",
     inc = 5;
$(document).ready(function(){
    $('#hero .featured').hover(function(){
        var e = $(this).index();
        console.log(e);
        $('#hero .featured').each(function(i){
            $(this).find('.content-box').animate({"width":"100%"}, speed, ease);
            if(i > e){
                $(this).stop().animate({"left":100-(($('#hero .featured').length - i)*inc)+"%"}, speed, ease);  
                console.log("right");
            } else if(i <= e){
                $(this).stop().animate({"left":i*inc+"%"}, speed, ease);    
                console.log("left");
            }
        });
    }, function(){
        $('#hero .featured').each(function(i){
            $(this).find('.content-box').animate({"width":"100%"}, speed, ease);
            $(this).stop().animate({"left":i*25+"%"}, speed, ease);
        });
    });
});

那么，为什么当我向 wordpress 模板添加完全相同的 HTML 和完全相同的 javascript 时，它的动画效果不正确？我什至在每个演示中都包含了相同的 jQuery 库。

有什么解决办法吗？

Answer 1

首先，您正在使用另一个 css 框架。我看了一下，我看到你正在使用 bootstrap。因此，这就是我向您推荐的内容：

a) add z-index to featured:nth-of-type(n), 从1到4, example add z-index: 3 to the element featured:nth-of-type(3);和 z-index: 4 到元素 featured:nth-of-type(4) 因为当您将鼠标悬停在第 4 个元素上时，实际上您现在正在触发第 3 个元素。

b) 添加过渡：所有 0.2s 缓和；到 :hover 也到 .featured:hover 和 #hero .featured。检查你所有的转换都在那里。我看到你添加了 -webkit 和 opera 但忘记了过渡：所有 0.2s 轻松;

c) 最后添加 css 硬件加速器：#hero .featured translate3d(0,0,0);查看更多 here

我试过了，运行顺利。看看结果。

PS：尝试使用 CSS 而不是 jQuery 来制作所有动画，因为您将使用更少的资源，从而优化 GPU。你可以阅读更多 here

#hero .featured {
width: 100%;
float: left;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-left: 2px solid white;
box-shadow: 0 0 40px rgba(0,0,0,0.75);
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.featured:hover {
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}

jQuery 开发站点和 wordpress 站点上的动画不同行为

jQuery animation different behavior on dev site and wordpress site

wordpress

jquery