StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWaiting until animation is over until replacing data inside the div
text
Body
copied!<p>I am having trouble changing the contents of a div. What I want to achieve is wait for the animation to end and then change the content to launch the animation to reveal the new info. This code works from time to time, meaning sometimes it hangs (isWorking never becomes false, because animation freezes or animation never has the time to finish from the constant looping inside the while.) Is there a way to wait for the animation to end and then change the content? (The way you see it below allows me to browse for the new content while the animation is ongoing which saves time for the end user.) Is there a way to catch when the animation ends?</p> <pre><code> function DesignResults(InnerHTML) { while(isWorking){ } $("#holder").html(InnerHTML); ShowSearch(true); } var isWorking = false; function ShowSearch(show) { isWorking = true; var outer = $("#outer"); var inner = $("#inner"); var height = 0; if (show == true) height = inner.outerHeight(); var loaderHeight if (height > 0) { loaderHeight = 0; } else { loaderHeight = 31; } outer.animate({ 'height': height + "px" }, 1600, function () { $("#loading").animate({ 'height': loaderHeight + "px" }, 900, function () { }); isWorking = false; }); } </code></pre> <p>I understand that $(elem).is(':animated') will give me if the animation is still in progress, but that still freezes everything due to the constant looping of the while. Can anyone point me to the right direction?</p> <p>EDIT: I guess I am misunderstood. Here is the plan I want to achieve:</p> <ol> <li>Start hiding animation.</li> <li>While the animation is hiding I am launching another function to get the content If I get the content faster I wish to wait for the animation to end then change the content and show the layer again. There isn't a issue here if the data takes more than a second to return</li> </ol> <hr> <p>I agree that i can do it after the animation completes as you suggested, but I have put the animation to almost 1 second execute time and that time can be used for the data to be pulled from the database. I am looking for the most effective code.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload