jQuery/CSS3不能让动画并行运行

Question

问题演示

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

<标题>

我试图得到一个元素移动，并为一个CSS类运行一些动画上的内部元素。但是，如果我在外部元素上运行jquery动画之前应用这个类，那么这个类将没有效果(它甚至不会移动到新的位置，更不用说动画了)。

要明白我的意思，运行动画。然后注释掉$('#box .inner-box').addClass('animate')，并取消注释同一行，它说'it doesn't work here'。

这是干什么用的?

这是我的自定义滑动条，这样当一个滑动条进来时，内容已经动画化了(这样看起来更好)。

那么我怎样才能让它们并行运行呢?谢谢。

Answer 1

根据您的示例，您没有使用相同的选择器。

$(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');
    });        
});

请注意我是如何改变第一行(它在这里不起作用!)来将.inner-box添加到选择器中，就像你在animate complete函数中所做的那样。

这就是你想要做的吗?对我来说，它似乎是并行的。

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