jquery - Animate.css + 视口(viewport)检查器延迟？

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();
    }

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