jquery - 分组切换后的jQuery fadeIn

我有以下内容，但是if语句完成对隐藏元素的循环后，$("span#slogan").fadeIn("slow");不会运行。

我该如何做才能使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上使用回调，因为由于if循环，.show运行了四次，如果我使用回调函数来淡入淡出，那么我将具有相同的淡入四次。

最佳答案

我为您创建了此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);
    }
}

关于jquery - 分组切换后的jQuery fadeIn，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10154486/