Animate.css + Viewport Checker延迟？

Question

我正在使用一个包含Animate.css和jQuery Viewport Checker的教程来将元素设置到我的页面中(http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and -jquery /).

我想知道如何修改这些动画,以便每个动画连续发生而不是一次完成.IE我希望第一个元素动画,然后当一个元素即将完成下一个元素开始动画,等等.

以下是我到目前为止所有元素的动画:

<div class="container">
    <div class="post">1</div>
    <div class="post2">2</div>
    <div class="post">3</div>
    <div class="post2">4</div>
    <div class="post">5</div>
    <div class="post2">6</div>
    <div class="post">7</div>
</div>

<script>
    $(document).ready(function(){
        $('.post').addClass("hidden").viewportChecker({
            classToAdd: 'visible animated fadeInUp',
            offset: 100
        });
        $('.post2').addClass("hidden").viewportChecker({
            classToAdd: 'visible animated fadeInDown',
            offset: 100
        });
    });
</script>

的jsfiddle

任何帮助非常感谢!!

Answer 1

实际上你根本不需要Viewport Checker.看到这个FIDDLE.这是更少的代码,并做同样的事情.我添加的唯一额外代码与动画的时间有关.

// ANIMATION SCRIPT
$(document).ready(function(){
    var i = 0;
    var posts = $('.container').children();

    function animateCircle() {
        if (i % 2 === 0) {
            $(posts[i]).addClass('visible animated fadeInUp');
        } else {
            $(posts[i]).addClass('visible animated fadeInDown');
        }
        i++;
        if (i <= posts.length) {
            startAnimation();
        }
    }

    function startAnimation() {
        setTimeout(function () {
            animateCircle();}, 1000);
    }

    posts.addClass('hidden');
    animateCircle(posts);
});

但是如果要使用Check Viewport,可以将animateCircle函数更改为:

function animateCircle() {
    if (i % 2 === 0) {
        $(posts[i]).viewportChecker({
            classToAdd: 'visible animated fadeInUp',
            offset: 100
        });
    } else {
        $(posts[i]).viewportChecker({
            classToAdd: 'visible animated fadeInDown',
            offset: 100
        });
    }
    i++;
    if (i <= posts.length) {
        startAnimation();
    }

这是一个使用jquery ViewportChecker显示它的FIDDLE.