animate.css和jquery的顺序动画 [英] Sequential animation with animate.css and jquery

问题描述

我如何让每个人都淡入淡出，但是按顺序呢？

demo 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'）;}）
}）; 
  

解决方案

您可以使用jquery的 fadeTo 使用完全相同的逻辑，你已经到位...

  $ （）{
 $（'。c'）。each（function（i）{
 $（this）.delay（（i ++）* 150）.fadeTo（500,1）;}）
}）; 
  

  $（function（）{$（'。 c'）。每个（function（i）{$（this）.delay（（i ++）* 150）.fadeTo（500,1）;}）}）;  

  .one，.two，.three {height：50px;背景：#dddddd; width：50px; border-radius：50％; display：inline-block; margin：auto 10px; opacity：0;}  

 < script src = ：//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>  

How can I make each of them to fadeInUp but in sequence?

demo http://jsfiddle.net/uz2rm8jy/4/

HTML

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

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

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

My js

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

解决方案

You can achieve that by using jquery's fadeTo using exactly the same logic you have already in place...

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

这篇关于animate.css和jquery的顺序动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！