jquery - jQuery回调不等待fadeOut

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 可以看到您的 empty<span>不需要淡出。因此它认为动画完成并执行 0ms 而不是预期的 4000ms。所以它立即开始在所有..adds

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

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

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

Answer 2

如果不起作用，请将“：空”更改为“：隐藏”：

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