在我看来,以下代码应该产生这些结果:
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代码使用跨度作为占位符。如果必须的话,我会对它们进行调整,但我很好奇为什么会发生这种情况。
答案 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);
});
});