javascript - 如何在轮播 Bootstrap.js 中为子元素设置动画

Question

使用 twitter bootstrap.js 中的回调“slid”，我试图在从幻灯片转换到幻灯片后单独为片段设置动画：

<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. 图像
2. h1
3. p

我该怎么做？

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

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

但是上面的问题是它在第一张幻灯片上一次淡入所有图像，被“滑入”。有没有办法让我在 div 中定位图像并将它们一个一个淡入淡出？

Answer 1

对于那里的任何人，我找到了解决方案：

Bootstrap 将一个名为“active”的类附加到轮播中的当前项目。

我只是使用了一个后代选择器来定位我需要动画的所有子元素，瞧，动画！