如何在旋转木马Bootstrap.js中设置子元素的动画

Question

使用twitter bootstrap.js中的回调"slide"，我试图在从幻灯片转换到幻灯片后单独制作片段的动画：

<div class="carousel">
    <div class="item active">
        <img src="animatefirst.png">
        <h1> second </h1>
        <p> third <p>
    </div>
    <div class="item">
        <img src="animatefirst.png">
        <h1> second </h1>
        <p> third <p>
    </div>
    <div class="item">
        <img src="animatefirst.png">
        <h1> second </h1>
        <p> third <p>
    </div>
</div>

正如你所看到的，我想按顺序制作以下动画：

1. img
2. h1
3. p

我该怎么做？

到目前为止，这就是我所能做的：

$('#carousel2').bind('slid', function(){
    $('img').fadeIn();
});

但上面的问题是，一旦第一张幻灯片被"滑入"，它就会同时淡出所有图像。有没有办法让我把div中的图像作为目标，并一个接一个地淡出它们？

Answer 1

对于任何人，我都找到了解决方案：

Bootstrap将一个名为"active"的类附加到转盘中的当前项目。

我只是使用了一个派生选择器来针对我需要动画的所有子元素，瞧，动画！