如何让animate函数逐个调用同一个类的下一个元素而不是同时调用

Question

这就是我要做的事情我正在制作一些动画数字计数器，我想做的是让它们在完成第一个元素之后开始使用下一个元素，这样它们都不会像那个在同一时间。 这是代码 HTML     ＆lt; div class =“count”＆gt;         ＆lt; div class =“num-label”＆gt;             ＆lt; span class =“number”＆gt; 20＆lt; / span＆gt;％         ＆LT; / DIV＆GT;东西     ＆LT; / DIV＆GT;

<div class="count">
    <div class="num-label">
        <span class="number">80</span>%
    </div> of something else
</div>

的CSS

.count{
    width:100%;
    font-size:3rem;
    text-align:center;
}
.num-label {
    font-size:7rem;
}

JQuery的

$(document).ready(function(){
    initcounter();
    function initcounter(){
        $('.number').each(function () {
            var $this = $(this);
            var count = $this.text();
            jQuery({ counter: 0 }).animate({ counter: $this.text()}, {
               duration: 7000,
               step: function () {
                   $this.text(Math.ceil(this.counter));
                }
            });
        });
    }
});

Answer 1

要获得有序动画，您可以尝试使用$.Deferred个对象。当animate方法返回deferred时，它可以被链接。像这样：

function animateBlock($el) {
  return $el.animate({
    marginTop: 100
  }, 300)
}
// Alert when animation is done
$.when(animateBlock($('#block'))).then(function() {
  alert('done!')
})

顺序动画

＆＃13;

＆＃13;

function animateBlock($el) {
  return $el.animate({
    marginTop: 100
  }, 300)
}

var $els = $('.block');
var defer = $.Deferred().resolve();

$els.each(function(i) {
  var $el = $(this);
  // Add next deffered to chain, it will be invoked when previous is completed
  defer = defer.then(function() {
    return animateBlock($el)
  })
})

＆＃13;

.block {
  background: gold;
  float: left;
  width: 80px;
  height: 80px;
  margin: 2px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

＆＃13;

＆＃13;

＆＃13;