jQueryの.animate（）は、一度に1つの要素に対してのみ機能するようですか？

Question

私はいくつかのダイナミックに作成された要素をアニメーション化することになっています。終了する前に別のアニメーションを開始しない限り、アニメーションは正常に動作します。

Here's a demoモックアップデザインがあります。

うまくいきますが、「POST！以前のバブルはアニメーション化が完了していないことがわかります。代わりに、彼らはちょうど途中で停止します。アニメーションの速度を変更すると、より明白になります。

誰でも原因を知ることができますか？あなたのjqueryのコードで手動

Answer 1

私はあなたのコードをコピーしてjsfiddleにそれを置く場合：http://jsfiddle.net/mau3J/

あなたの問題は、この行である：

$('#chatbox').html(html+$('#chatbox').html()); 

#chatbox内のすべてのものを、その時点で#chatboxに置き換え、アニメーションをキャンセルしています。これは、それを置き換えるのではなく、DOMに追加され

$('#chatbox').prepend($(html)); 

：でjsfiddleリンクの場合と同様に

は、交換してください。 $（）でhtml varをラップすると、jqueryオブジェクトに変換されます。

また、のサイドアドバイスとして、jQueryのクラスを先頭にピリオドを付けることができます。ここにあなたのコードは：

$('#chatbox').find('[class="chatbubble"]:first') 

あなたはjQueryの表記の意味を理解するのに役立ちますCSSセレクタ上に読み

$('#chatbox .chatbubble:first') 

に相当します。

Answer 2

完了のチェッ​​クが使用条件