jQuery的回调不等待淡出

Question

在我看来下面的代码应产生这些结果：

mademoiselle
demoiselle
mesdemoiselles

相反，如 “MA” 淡出， “MES” 淡入使序列：

mademoiselle
madesdemoiselles
mesdemoiselles

代码：

<span class="remove">ma</span><span class="add">mes</span>demoiselle<span class="add">s</span>

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

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

<span class="remove">ma</span><span class="add">mes</span>demoiselle<span class="remove"></span><span class="add">s</span>

的问题是：在PHP码生成这是使用跨度用作占位符。我会str_replace函数他们，如果我必须这样做，但我很好奇为什么发生这种情况。

Answer 1

好了，我成功地重现您的问题请参阅 http://jsbin.com/ocaha 的例子

这是怎么回事是jQuery的可以看到你的空<span>不需要淡出。为此它认为动画完成并执行0毫秒，而不是预期4000ms。因此，它立即开始衰落中的所有.adds的

要防止此问题，我会过滤器从选择了所有空元素。像这样：

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

请参阅在 http://jsbin.com/ovivi 的工作实施例。

Answer 2

更改 “： 空的” 到 “ 隐藏的” 如果不工作：

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