jQuery的回调不等待淡出
题
在我看来下面的代码应产生这些结果:
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函数他们,如果我必须这样做,但我很好奇为什么发生这种情况。
解决方案
好了,我成功地重现您的问题请参阅 http://jsbin.com/ocaha 的例子
这是怎么回事是jQuery的可以看到你的空<span>
不需要淡出。为此它认为动画完成并执行0毫秒,而不是预期4000ms。因此,它立即开始衰落中的所有.adds
的强>
要防止此问题,我会过滤器从选择了所有空元素。像这样:
$(document).ready(function() {
$(".remove")
.filter(function(){ return ! $(this).is(":empty"); })
.fadeOut(4000, function(){
$(".add").fadeIn(5000);
});
});
请参阅在 http://jsbin.com/ovivi 的工作实施例。
其他提示
更改 “: 空的” 到 “ 隐藏的” 如果不工作:
$(document).ready(function() {
$(".remove")
.filter(function(){ return ! $(this).is(":hidden"); })
.fadeOut(4000, function(){
$(".add").fadeIn(5000);
});
});
不隶属于 StackOverflow