分组切换后 jQuery 淡入

Question

我有以下内容，但 $("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 四次。

Answer 1

我已经为您创建了这个 JSFiddle，需要注意的是，我删除了反弹效果，因为我无法将其包含在 jsFiddle 中。

http://jsfiddle.net/3fEeb/

关键是在回调内部检查所有跨度是否可见，如果是这样，则淡入口号..

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);
    }
}