jQuery fadeIn after grouped toggle
<p>I have the following but <code>$("span#slogan").fadeIn("slow");</code> does not run after the if statement has finished looping through the hidden elements.</p>

<p>How can I make it so that fadeIn is the last thing to run?</p>

<pre><code>&lt;style type="text/css"&gt;
#hidden span{
    display:none;
    float:left;
    font-size:20px;
}
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
$(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();
    });
});
&lt;/script&gt;

&lt;button&gt;Click&lt;/button&gt;

&lt;div id="hidden"&gt;
    &lt;span&gt;T&lt;/span&gt;
    &lt;span&gt;e&lt;/span&gt;
    &lt;span&gt;x&lt;/span&gt;
    &lt;span&gt;t&lt;/span&gt;
    &lt;span id="slogan"&gt;Slogan&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>​
<strong>Callback</strong></p>

<p>I can't use the callback on the <code>.show</code> because the <code>.show</code> runs four times because of the if loop, if I use the callback to fadeIn then I would have the same fadeIn four times.</p>
