javascript - 使用jquery在div中添加一个又一个动画

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，并且该演示将来可能会中断。提供的 fiddle OP 不断将热链接脚本重定向到 google)。