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

【问题标题】：How to animate sub-elements inside a carousel Bootstrap.js如何在轮播 Bootstrap.js 中为子元素设置动画
【发布时间】：2013-02-18 23:53:10
【问题描述】：

使用 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>

如您所见，我想按顺序制作以下动画：

我该怎么做？

到目前为止，我能做的只有这些：

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

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

【问题讨论】：

标签： javascript twitter-bootstrap callback carousel

【解决方案1】：

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

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

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

【讨论】：