Question

I have some dynamically created elements that are supposed to be animated. The animations work fine as long as you don’t start another one before it finishes.

Here’s a demo of a mock up design I have.

It works well, but if you spam click “POST!” you’ll see that the previous bubbles don’t quite finish animating. Instead they just stop midway. It becomes more apparent if you change the animation speed.

Does anyone know what could be causing it?

Answer 1

I copied your code and put it into a jsfiddle: http://jsfiddle.net/mau3J/

Your problem lies with this line:

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

You are inherently replacing everything inside #chatbox with what #chatbox was at that moment, cancelling any animations.

As in the jsfiddle link, replace with:

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

This is adding to the DOM instead of replacing it. Wrapping the html var in $() will convert it into a jquery object.

Also as side advice, classes in jQuery can be referred to with a period in front. Your code here:

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

is equivalent to

$('#chatbox .chatbubble:first')

Reading up on CSS selectors will help you understand what the jQuery notation means.