Question

我有一些动态创建的元素应该是动画的。只要你在完成之前没有启动另一个动画，动画就可以正常工作。

我有一个模拟设计的Here's a demo。

效果很好，但如果你垃圾邮件点击“POST！”你会发现之前的泡泡还没有完成动画。相反，他们只是中途停止。如果你改变动画速度就会变得更加明显。

有谁知道可能导致它的原因？

Answer 1

我复制了你的代码并将其放入jsfiddle：http://jsfiddle.net/mau3J/

你的问题在于这一行：

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

你正在用#chatbox替换#chatbox里面的所有内容，取消任何动画。

与jsfiddle链接一样，替换为：

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

这是添加到DOM而不是替换它。在$（）中包装html var会将其转换为jquery对象。

同样作为侧面建议，jQuery中的类可以引用前面的句点。你的代码在这里：

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

相当于

$('#chatbox .chatbubble:first')

阅读CSS选择器将帮助您理解jQuery符号的含义。

Answer 2

使用if条件

在jquery代码中手动检查完成