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

Answer 1

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

Answer 2

如果不能正常工作，请将“：空 ”更改为“：隐藏 ”：

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

jQuery回调没有等待fadeOut

2 个答案: