jQuery的回调不会等待淡出

在我看来，下面的代码应该产生以下结果：jQuery的回调不会等待淡出

mademoiselle 
demoiselle 
mesdemoiselles

相反，如“马”淡出“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代码使用跨度作为占位符。如果必须，我会替换它们，但我很好奇为什么会发生这种情况。

来源

2009-11-05 Stephane

样品产生预期的行为，我在Safari 4.0.3和FF 3.5。你测试了哪些浏览器？ – outis 2009-11-05 03:03:34

您使用的浏览器是什么，我已经在Firefox中试过了，它可以像您期望的那样工作。 – Deeksy 2009-11-05 03:06:29

我尝试过FF3.05和Safari 4.03 它必须是页面上的其他内容。我需要把jQuery放在脑海中吗？ – Stephane 2009-11-05 03:42:49

好吧，所以我设法重现您的问题看到http://jsbin.com/ocaha的例子。

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

为了防止这种行为，我将filter从选择的所有空元素。像这样：

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

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

来源

2009-11-05 19:24:37

惊人的帮助！谢谢！ – Stephane 2009-11-06 14:30:35

变化 “：空” 到 “：隐藏” 如果不工作：

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

来源

2012-12-20 16:13:08 gleenk

jQuery的回调不会等待淡出

回答

相关问题