jQuery/CSS3 无法让动画并行运行

Question

问题演示

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

说明

我试图让一个元素移动，并让一个 CSS 类在内部元素上运行一些动画。但是，如果我在外部元素上运行 jquery 动画之前应用该类，则该类将不起作用（它甚至不会移动到新位置，更不用说动画了）。

要了解我的意思，运行动画。然后注释掉 $('#box .inner-box').addClass('animate') 并取消注释它说“它在这里不起作用”的同一行。

这是干什么用的？

这是为我的自定义滑块设计的，这样当幻灯片进入时，内容已经有了动画效果（这样看起来好多了）。

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

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 添加到选择器中，就像您在动画完成函数中所做的那样。

这就是你想要做的吗？它似乎对我来说是并行动画。

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