0
divの100％になるように多くのスパンをアニメーション化するコードがあります。問題は、jQueryがループの各反復でアニメーションを開始し、あるスパンがどのくらい長くなるかを決定することです。例えば：ループ内に多数のJQueryアニメーションをロードしますが、ループが停止するまでアニメーションが開始されないようにします。
for (var i = 0; i < spans.length; i++) { // could be 500+
$(spans[i]).animate({
width: SOME_NUMBER
}, {
duration: ANIMATION_DURATION
});
}
}
私はに実行し、問題があればスパン1が総div要素の、50％を言う、の幅を取得することで、それは他のスパンが縮小し始めるかなり前に、その幅に拡大し始めます。私が最終的になるのは、アニメーションの大半が100％を超えていることです。また、スパンの総ラップアラウンドは、すべてが適合しないためです。これは、イージングではなく、アニメーションを線形に設定しても発生します。アニメーションが終了すると、それらはすべて私がそれらに欲しいところで正確に終わります。
私の質問は次のとおりです。
A）正確に同じ時間でそれらすべてを開始、ループが終了するまで開始するアニメーションのどれを強制しない、との方法はありますか？
B）ある時点で合計幅が> 100％にならないようにする方法はありますか？ここで
はフィドルはスパンの何百も、しかし、私はそれが見えるようにしたいものを実証している、それはもう、このように見えるように十分な速さでアニメーション化されていません。https://jsfiddle.net/wu7o6z37/
ループが非同期ではないので、同時にすべてのアニメーション開始。パフォーマンスの問題や緩和の問題が増えるかもしれません。しかし、jqueryの代わりにCSSアニメーションを使うほうが良いかもしれません。言い換えれば、CSSでは 'transition：width .5s'を使用し、jQuery' .css（ 'width'、SOME_NUMBER） 'で使用します。 –
ありがとう、私は今それを試してみます – David
それは問題を解決しました、ありがとう！あなたが回答として投稿した場合、私はそれを受け入れることができます – David