JQuery Element Display / Hiding and Control Flow
<p>I am working on displaying a progress bar using JQuery during a long running function. My plan is to simply show the div containing the progress bar before calling the function, and then hiding the div after the function is finished. The following code example demonstrates what I am trying to accomplish.</p>

<pre><code>$(document).ready(function() {
    $(document).click(function() {
        $("#progress").show();
        slowFunction();
        $("#progress").hide();
    });
});

function slowFunction() {
    for (var i = 0; i &lt; 50000; ++i) {
        var t = Math.sin(i) + Math.cos(i);
        console.log(t);
    }
}
</code></pre>

<p>Example on JSFiddle <a href="http://jsfiddle.net/MT25x/4/" rel="nofollow">http://jsfiddle.net/MT25x/4/</a></p>

<p>The problem is that the div is not being displayed at all even though the function takes ~10 seconds on my machine to run.</p>

<p>If however I just try to show the div after the function it works fine, coming up in ~10 or so seconds after the click occurs. Can anybody help me shed some light on this issue?</p>

<p>Edit: 
Further testing seems to show that if you remove the hide call all together the div isn't even showing until after the function has finished running. This seems like very odd behavior.</p>
