Javascript 如何在页面滚动后显示CSS3动画时排队（提供了JSFIDLE）

JSFIDDLE:

我有3张图像要添加一个

.animation

类，以便它们以反弹的方式显示：

<div class="row">
  <div class="col-sm-4 steps">
  <img src="./s3/img/sprite-circle-1.png" class="step-1 bounceIn">
  </div>

  <div class="col-sm-4 steps">
  <img src="./s3/img/sprite-circle-2.png" class="step-2 bounceIn">
  </div>

  <div class="col-sm-4 steps">
  <img src="./s3/img/sprite-circle-3.png" class="step-3 bounceIn">
  </div>
</div>

我希望该类应用于每个图像，当第一个图像加载到屏幕上时，它们之间有1秒的延迟

我有代码来确定元素何时可见（工作）：

---

我正在努力寻找如何按顺序延迟每个动画。对CSS转换应用延迟似乎不会调用跨浏览器的一致行为（例如，步骤2可以在步骤1之前加载）。如何在jQuery中对此进行排队？

您可以定义CSS动画并将其附加到特定类

CSS JQUERY

---

现在，只需使用jQuery在适当的时间将这些类添加到元素中（例如，延迟1秒，将

.slideUp

类添加到四个图像中，等等）

为了增加每个图像的延迟，@alias51可以通过

.css（）分别设置动画延迟属性

在添加

.animate

类之前。@kumar是。。。这就是问题的本质！我该怎么做？：）@不幸的是，Janfohe有单独的元素和一个滚动条，并不是所有的浏览器都会按正确的顺序排列延迟，所以这不起作用。@alias51很高兴知道。你特别注意到浏览器有问题吗？我头顶上的东西。。。可能会有一些问题（分号等），请让我知道它是否有效。。。

.animated.bounceIn{
// code: see JSFIDDLE - http://jsfiddle.net/mh7e8/1/ for detail
}

(function ($) {

    $.fn.isVisible = function (partial, hidden, direction) {

 // working code: see JSFIDDLE - http://jsfiddle.net/mh7e8/1/ for detail


})(jQuery);
$(function () {

    var $bounceIn = $('.step-1');
    var testVis = function () {
        $bounceIn.each(function () {
            if ($(this).isVisible()) {
                console.log("step-1 visible");
            }

});
};

$(window).on('scroll resize', testVis);
testVis();
});

.slideUp {
  animation: slide-up 1500ms ease;
}

/* these are the classes you want to animate */
toAnimate = ['step1', 'step2', 'step3']

/* iterate over this array and apply the *slideup* class */
$.each(toAnimate, function(i, class) {
  window.timeout(function {
    $('.parent').find(class).addClass('slideUp')
  }, i*1000);
}