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

Question

我正在做一个只有3个对象的简单动画。当我在普通页面上执行此动画时，它可以正常工作。当我将其转移到Wordpress模板时，动画似乎排队并一次运行一个

我已经尝试了This S.O. Solution，但它没有用。

所需的行为是Here。当您将鼠标悬停在图像上时，悬停在图像上的图像（如果它不是＃1）会与其他图像“偏离”的图像同时生成动画。

不正确的行为是Here。正如您所看到的，当您将鼠标悬停在图像上时，首先不会悬停在动画上的幻灯片，然后您已选择的幻灯片＆＃39;徘徊到正确的位置。

问题是＆＃34;然后＆＃34;。所有这些瓷砖都应该同时制作动画。

这是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）将z-index添加到特色：nth-​​of-type（n），从1到4，示例将z-index：3添加到特征元素：nth-​​of-type（3）;和z-index：4到元素的特色：nth-​​of-type（4）因为当你悬停第4个元素时，你现在正在触发第3个元素。

b）添加过渡：全部0.2s轻松; to：徘徊到.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;
}