javascript - 使用 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>