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 代码使用 span 作为占位符。如果有必要，我会 str_replace 它们，但我很好奇为什么会发生这种情况。

Answer 1

好的，我设法重现了您的问题，请参阅 http://jsbin.com/ocaha 中的示例。

发生的情况是 jQuery 可以看到您的空 不需要淡出。因此，它认为动画已完成并执行 0 毫秒，而不是预期的 4000 毫秒。因此它立即开始在 .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);
   });
});