Question

JSFIDDLE：http://jsfiddle.net/mh7e8/1/

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

我已经有了一个非常好的（工作）CSS3动画：

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

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

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

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

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

Answer 1

您可以定义CSS动画并将它们附加到特定的类。

CSS

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

JQUERY

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

现在，只需使用jQuery在适当的时间将这些类添加到元素中（例如，延迟1秒，将.slideUp类添加到四个图像等）

如何在页面滚动后显示队列CSS3动画（提供JSFiddle）

1 个答案:

CSS

JQUERY