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>

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

IMG
H1
P

我该怎么做？

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

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

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

Answer 1

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

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

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

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

1 个答案: