jQuery animation different behavior on dev site and wordpress site

Question

I am doing a simple animation of just 3 objects. When I do this animation on a normal page, it works just fine. When I transfer it over to a Wordpress template, the animations seem to queue up and run one at a time

I've tried This S.O. Solution but it did not work.

The desired behavior is Here. When you hover over an image, the image you hover over (if it's not #1) animates at the same time as the other images that are 'getting out of the way'.

The incorrect behavior is Here. As you can see, when you hover over an image, the slides that are not being hovered over animate first, then the slide you have 'selected' hovers to the correct position.

The problem is the "then". All of these tiles should animate at the same time.

Here is the 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);
        });
    });
});

So, why is it, that when I add exactly the same HTML and exactly the same javascript to a wordpress template, does it animate incorrectly? I've even included the same jQuery library in each demo.

Any solutions?

Answer 1

First you are using another css framework. I took a look and I saw you are using bootstrap. So here's what I recommend you:

a) add z-index to featured:nth-of-type(n), from 1 to 4, example add z-index: 3 to the element featured:nth-of-type(3); and z-index: 4 to the element featured:nth-of-type(4) because when you hover the 4th element in fact you're triggering now the 3rd element.

b) add transition: all 0.2s ease; to :hover also to .featured:hover and #hero .featured. Check all your transitions are there. I saw you added -webkit and opera but forgot transition: all 0.2s ease;

c) and Finally add css hardware accelerator: #hero .featured translate3d(0,0,0); see more here

I tried that and works smoothly. Take a look at the result.

PS: try to do all animations with CSS rather than with jQuery because you will use less resources, hence optimize GPU. you can read more 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;
}