カウントアップ関数で遅延を実行しようとしているので、カウンターの終了クラス名が終了するたびに、前のクラス名が終了するたびにカウントアップが実行されます。
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 4000,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
これはeachループでは機能しません。completeアニメーションは非同期であるため、コールバックを使用して自分で行う必要があります。
再帰的な自己実行関数を使用します。非常に簡単です。完了したら次のものを開始するだけです。
var elements = $('.counter');
var current = 0;
(function next() {
var $this = elements.eq(current),
countTo = $this.attr('data-count');
$({countNum: $this.text()}).animate({countNum: countTo}, {
duration: 4000,
easing: 'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
if( (++current) < elements.length ) {
next();
}
}
});
})();
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加