アニメーションを開始する前に、要素を分析して、すべてが適切な場所にあることを確認する必要があります。
私は今これを機能させていますが、問題は、「アニメーション」ボタンのクリックが速すぎると、物事がうまくいかなくなることです。ユーザーが辛抱強く、すべてのアニメーションが完了するのを待つことは期待できません。
私は何をすべきか?
アニメーションを開始する前に、要素を分析して、すべてが適切な場所にあることを確認する必要があります。
私は今これを機能させていますが、問題は、「アニメーション」ボタンのクリックが速すぎると、物事がうまくいかなくなることです。ユーザーが辛抱強く、すべてのアニメーションが完了するのを待つことは期待できません。
私は何をすべきか?
アニメーション開始時にボタンを無効にし、アニメーション完了コールバックでボタンを有効にします。
アニメーションを開始する前に、呼び出し.stop(true)
て、進行中のキューに入れられたアニメーションを中断する必要があります。次に、今と同じように要素をリセットして、新しいアニメーションを開始します。
役立つ場合.stop(true, true)
は、要素を開始/停止位置の間に残すのではなく、単にアニメーションの最後にジャンプします。
stop(true, true)
キューをクリアして最後にジャンプするために使用します。
これにより、要素は以前に実行されていたアニメーションの終了状態になります。
ここ
最初の属性はキューをクリアすることです
2番目の属性は、最後までジャンプすることです。
.animation()
文書化されていないstart
オプションがある場合は、それを使用して分析します
$('.box').animate({left:100},{
duration:500,
start:function(){
console.log('start');
},
complete:function(){
console.log('end');
}
});