jQuery回调没有等待fadeOut

时间:2009-11-05 02:49:46

标签: jquery callback fadein fadeout

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

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代码使用跨度作为占位符。如果必须的话,我会对它们进行调整,但我很好奇为什么会发生这种情况。

2 个答案:

答案 0 :(得分:9)

好的,所以我设法重现了您的问题,请参阅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上的工作示例。

答案 1 :(得分:2)

如果不能正常工作,请将“: ”更改为“: 隐藏 ”:

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