Question

当我向下滚动到那个点时，我正试图将动画添加到div之后。我在同一个<div>中有三个row。

HTML标记如下：

<div class="row">
 <div class="col-md-4">
   <div class="postCenter>Blah blah blah </div>
 </div>
 <div class="col-md-4">
   <div class="postCenter>Blah blah blah </div>
 </div>
 <div class="col-md-4">
   <div class="postCenter>Blah blah blah </div>
 </div>

我正在使用viewportchecker jquery插件来触发滚动事件。

我使用的 jQuery 是：

$('.postCenter').each(function(i) {
        $(this).delay(1000*i);
        jQuery('.postCenter').addClass("hiddenClass").viewportChecker({
            classToAdd: 'visibleClass animated bounce',
            offset: 200
        });
    });

现在动画正在同时发生。我想这个延迟不起作用。如何将动画一个接一个地添加到<div>？

JsFiddle：http://jsfiddle.net/hs5nn412/

Answer 1

我看到现在发生了什么。一旦滚动到页面上，您希望这三个元素淡入，但您不希望它们同时淡入。您希望它们以不同的延迟顺序淡入淡出。我建议将setTimeout和插件提供的callbackFunction组合使用。结果如下：

$('.postCenter').each(function(i){
    $(this).addClass("hiddenClass").data('delay', i * 500);
}).viewportChecker({
    callbackFunction: function(elem, action){
        setTimeout(function(){
            $(elem).addClass('visibleClass');
        }, $(elem).data('delay'));
    }
});

概念是索引它们，添加隐藏类，然后使用回调函数在setTimeout之后添加类。

这是一个有效的演示：http://jsfiddle.net/uqc8d24s/（请注意，我必须自己托管这个库。我找不到它的CDN，这个演示将来可能会破坏。提供的小提琴OP保持重定向热链接脚本谷歌）。

Answer 2

使用setTimeout()应该有效。

$('.postCenter').each(function(i) {
    setTimeout( function(){
        $(this).addClass("hiddenClass").viewportChecker({
            classToAdd: 'visibleClass animated bounce',
            offset: 200
        });
    }, 500*i ); 
});

使用jquery在div中一个接一个地添加动画

2 个答案: