我有以下内容,但 $("span#slogan").fadeIn("slow");
在 if 语句完成对隐藏元素的循环后不会运行。
我怎样才能让fadeIn成为最后运行的东西?
<style type="text/css">
#hidden span{
display:none;
float:left;
font-size:20px;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
function showDiv() {
if($('#hidden span:not(#slogan)').is(':hidden')) {
$('#hidden span:not(#slogan):hidden:first').show("bounce", { times:3 }, 500);
setTimeout(showDiv, 500);
}
$("span#slogan").fadeIn("slow");
}
$("button").click(function() {
showDiv();
});
});
</script>
<button>Click</button>
<div id="hidden">
<span>T</span>
<span>e</span>
<span>x</span>
<span>t</span>
<span id="slogan">Slogan</span>
</div>
回调
我无法在 .show
上使用回调,因为 .show
由于 if 循环而运行四次,如果我使用淡入淡出回调,那么我会有相同的 fadeIn 四次。
最佳答案
我已经为您创建了这个 JSFiddle,需要注意的是,我删除了反弹效果,因为我无法将其包含在 jsFiddle 中。
关键是在回调内部检查所有跨度是否可见,如果是这样,则淡入口号..
function showDiv() {
if($('#hidden span:not(#slogan)').is(':hidden')) {
$('#hidden span:not(#slogan):hidden:first').show("bounce", { times:3 },function() {
if($('#hidden span:not(#slogan):hidden:first').length==0){
$("span#slogan").fadeIn("slow");
}
});
setTimeout(showDiv, 500);
}
}
关于分组切换后 jQuery 淡入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10154486/