jQuery/CSS3 Cannot get animations to run in parallel

Question

Demo of issue

http://jsfiddle.net/8yTY8/2/

Explanation

I am trying to get an element to move, and for a CSS class to run some animations on an inner element. However, if I apply the class before running the jquery animation on the outer element then the class will have no effect (it doesn't even move to the new location let alone animate).

To see what I mean run the animation. Then comment out the $('#box .inner-box').addClass('animate') and uncomment the same line where it says 'it doesn't work here'.

What is this for?

This is for my custom slider so that when a slide comes in, the content is already animating (it looks much better this way).

So how can I get them to run in parallel? Thanks.

Answer 1

Based on your example, you are not using the same selectors. This worked for me:

$(document).ready(function() {
    $('#box .inner-box').addClass('animate');  // it doesn't work here!
    $('#box').animate({top:'150px'}, 2000, 'swing', function() {
        //$('#box .inner-box').addClass('animate');
    });        
});

Notice how I had to change the first line (it doesn't work here!) to add .inner-box to the selector, the way you do in the animate complete function.

Is that what you are trying to do? It appears to animate in parallel for me.

http://jsfiddle.net/8yTY8/3/