带有animate.css和jquery的顺序动画

Question

如何使它们每个都按顺序淡入淡出？

演示http://jsfiddle.net/uz2rm8jy/4/

HTML

<div class="c one"></div>

<div class="c two"></div>

<div class="c three"></div>

我的js

$(function() {
$('.c').each(function(i) {
$(this).delay((i++) * 150).addClass('fadeInUp'); })
});

Answer 1

您可以通过使用jquery的fadeTo使用与您已经使用的完全相同的逻辑来实现这一点...

$(function() {
  $('.c').each(function(i) {
  $(this).delay((i++) * 150).fadeTo(500,1); })
});

 $(function() { $('.c').each(function(i) { $(this).delay((i++) * 150).fadeTo(500,1); }) }); 

 .one,.two,.three { height: 50px; background: #dddddd; width: 50px; border-radius: 50%; display:inline-block; margin: auto 10px; opacity:0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="c one"></div> <div class="c two"></div> <div class="c three"></div> 

Answer 2

问题是关于Animate.css库的，但是答案对animate.css没有帮助，我遇到了同样的问题，并最终解决了它。 参见下面的小提琴。 的jsfiddle

代码：HTML示例

<div class="content">
  <div class="firstanimation">
    <h1 data-animation="fadeInUp" style='display: none'>
      This is Title
    </h1>
  </div>
  <div class="secondanimation">
    <p data-animation="wobble" style='display: none'>
      This is Description
    </p>
  </div>
  <div class="lastanimation">
    <p data-animation="bounce" style='display: none'><a href="#">Link</a></p>
  </div>
</div>

jQuery的：

// With Queue
function animate2(queue) {
  if (queue && queue.length > 0) {
    var elm = queue.shift();

    var animClass = "animated " + $(elm).data('animation');

    $(elm).show().addClass(animClass)
      .on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $(elm).removeClass();
        animate2(queue);
      });
  }
};



$(function() {
  var animationQueue = [
    $('.content').find('.firstanimation h1'),
    $('.content').find('.secondanimation p'),
    $('.content').find('.lastanimation p')
  ];

  animate2(animationQueue);
});

Answer 3

有两个选项供您选择。

1. 过渡结束事件，可以使用JavaScript触发
2. 过渡延迟

可以在任何具有过渡的元素上侦听过渡结束事件。 您可以在过渡结束时触发一个函数，如下所示：

element.addEventListener( "transitionend", function() {
    // run code here to add class on next element
});

您必须确保添加必要的前缀，但是jQuery可以帮助您。 这在for循环中很容易实现。

没有额外的JS或过渡结束事件的另一种选择是将.c.two和.c.three的过渡延迟实际过渡的长度（和.c.three ）。 您可以通过使用各个元素上的transition-delay属性直接在CSS中添加此属性。

我希望这有帮助。

Answer 4

我不确定您的意思，根据您的代码，您只是想将类“ fadeInUp”添加到div中。 但是尝试一下，也许会有所帮助。

function fade(e){
$(e+":not(:visible):first").fadeIn(function(){
    fade(e);
});
}

要使用该函数，只需将类'c'作为参数传递：例如。

fade('.c');