Jquery Animate.css+；视口检查器延迟？

我正在使用一个教程，该教程将元素合并到我的页面（）中并为其设置动画

我想知道如何修改这些动画，使每个动画连续发生，而不是一次全部发生。也就是说，我想让第一个元素动画化，然后当那个元素即将完成时，下一个元素开始动画化，等等

以下是我到目前为止所做的一次为所有元素设置动画的内容：

<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>

1.
2.
3.
4.
5.
6.
7.
$（文档）.ready（函数（）{
$（'.post'）.addClass（“隐藏”）.viewportChecker({
classToAdd:'可见动画fadeInUp'，
偏移量：100
});
$（'.post2'）.addClass（“隐藏”）.viewportChecker({
classToAdd:“可见动画fadeInDown”，
偏移量：100
});
});

---

非常感谢您的帮助

实际上，您根本不需要视口检查器。看这个。它的代码更少，并且做同样的事情。我添加的唯一额外代码与动画的计时有关

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

//动画脚本
$（文档）.ready（函数（）{
var i=0；
var posts=$（'.container'）.children（）；
函数animateCircle（）{
如果（i%2==0）{
$（posts[i]）.addClass（'visible animated fadeInUp'）；
}否则{
$（posts[i]）.addClass（'visible animated fadeInDown'）；
}
i++；
如果（i我知道这是一篇老文章，但我只是在谷歌输入“viewportchecker”就找到了

下面是一个工作解决方案，用于设置元素的延迟动画：

$('.info-bar').find('li').addClass('hidden');
$('.info-bar').viewportChecker({
    classToAdd: 'in-viewport',
    offset: 100,
    callbackFunction: function(elem) {
        var elements = elem.find('li'),
            i = 0;
        interval = setInterval(function(){
            elements.eq(i++).addClass('visible animated pulse');
            if(i==elements.length) {
                clearInterval(interval);
            }
        },250);
    }
});

<ul class="info-bar">
  <li>some content</li>
  <li>some content</li>
  <li>some content</li>
  <li>some content</li>
  <li>some content</li>
</ul>

$（'.info bar'）.find（'li'）.addClass（'hidden'）；
$（'.info bar'）.viewportChecker({
classToAdd:“在视口中”，
抵销：100，
callbackFunction:function（elem）{
var elements=elem.find（'li'），
i=0；
间隔=设置间隔（函数（）{
elements.eq（i++）.addClass（“可见动画脉冲”）；
if（i==elements.length）{
间隔时间；
}
},250);
}
});

一些内容
一些内容
一些内容
一些内容
一些内容

您可以通过稍微调整ViewportChecker脚本来实现这一点（Animate.css+视口检查器延迟）。我已经在版本1.7.4中完成了这一点。有3个修改：

1） 添加默认值为0的“延迟”选项：

$.fn.viewportChecker = function(useroptions){
    // Define options and extend with user
    var options = {
        classToAdd: 'visible',
        classToRemove : 'invisible',
        offset: 100,
        repeat: false,
        invertBottomOffset: true,
        callbackFunction: function(elem, action){},
        scrollHorizontal: false,
        delay: 0 // HERE
    };
    ...

2） 添加“数据延迟”功能，以便可以在html标记中指定延迟：

// Loop through all given dom elements
$elem.each(function(){
    var $obj = $(this),
        objOptions = {},
        attrOptions = {};

    //  Get any individual attribution data
    if ($obj.data('vp-add-class'))
        attrOptions.classToAdd = $obj.data('vp-add-class');
    if ($obj.data('vp-remove-class'))
        attrOptions.classToRemove = $obj.data('vp-remove-class');
    if ($obj.data('vp-offset'))
        attrOptions.offset = $obj.data('vp-offset');
    if ($obj.data('vp-repeat'))
        attrOptions.repeat = $obj.data('vp-repeat');
    if ($obj.data('vp-scrollHorizontal'))
        attrOptions.scrollHorizontal = $obj.data('vp-scrollHorizontal');
    if ($obj.data('vp-invertBottomOffset'))
        attrOptions.scrollHorizontal = $obj.data('vp-invertBottomOffset');
    if ($obj.data('vp-delay')) // HERE
        attrOptions.delay = $obj.data('vp-delay');
    ...

3） 使用setTimeout调用包装元素在视口中时要执行的语句：

// Add class if in viewport
if ((elemStart < viewportEnd) && (elemEnd > viewportStart)){
     setTimeout(function() { // HERE
          // remove class
          $obj.removeClass(objOptions.classToRemove);

          $obj.addClass(objOptions.classToAdd);

          // Do the callback function. Callback wil send the jQuery object as parameter
          objOptions.callbackFunction($obj, "add");
      }, objOptions.delay);
      ...

JS

哇。这个答案远远超出了我的想象。非常感谢你们，这正是我想要的！！！
// Add class if in viewport
if ((elemStart < viewportEnd) && (elemEnd > viewportStart)){
     setTimeout(function() { // HERE
          // remove class
          $obj.removeClass(objOptions.classToRemove);

          $obj.addClass(objOptions.classToAdd);

          // Do the callback function. Callback wil send the jQuery object as parameter
          objOptions.callbackFunction($obj, "add");
      }, objOptions.delay);
      ...

<div data-vp-animate="bounceInLeft" data-vp-delay="500">
    ...
</div>

.hidden-o {
   opacity: 0;
 }
.visible-o {
   opacity: 1;
}

$('[data-vp-animate]').each(function() {
    var classToAdd = 'visible-o animated '+($(this).data('vp-animate') ? $(this).data('vp-animate') : 'fadeIn');

    $(this).addClass('hidden-o').viewportChecker({
        classToAdd: classToAdd
   });
});