jQuery回调没有等待fadeOut

在我看来，以下代码应该产生这些结果：

mademoiselle demoiselle mesdemoiselles 

相反，随着“ma”淡出，“mes”在制作序列时消失：

 mademoiselle madesdemoiselles mesdemoiselles 

代码：

 mamesdemoiselles $(document).ready(function() { $(".remove").fadeOut(4000,function(){ $(".add").fadeIn(5000); }); }); 

编辑：我发现一个空的跨度，如果我删除使该bug消失：

 mamesdemoiselles 

问题是：生成这个的PHP代码使用跨度作为占位符。 如果必须的话，我会对它们进行调整，但我很好奇为什么会发生这种情况。

Answer 1

好的，所以我设法重现你的问题，请参阅http://jsbin.com/ocaha上的示例。

发生的事情是jQuery可以看到你的空不需要淡出。 因此它认为动画完成并执行0ms而不是预期的4000ms。 所以它立即开始在所有的.adds 。

为了防止这种行为，我会从选择中过滤掉所有空元素。 像这样：

 $(document).ready(function() { $(".remove") .filter(function(){ return ! $(this).is(":empty"); }) .fadeOut(4000, function(){ $(".add").fadeIn(5000); }); }); 

请参阅http://jsbin.com/ovivi上的工作示例。

Answer 2

如果不工作，请将“： empty ”更改为“： hidden ”：

 $(document).ready(function() { $(".remove") .filter(function(){ return ! $(this).is(":hidden"); }) .fadeOut(4000, function(){ $(".add").fadeIn(5000); }); });