Adding and removing content in jQuery

Question

If I create a function with jQuery that adds an empty div, performs some animation inside the blank space created by the div, then removes the div, the browser never makes room for the empty div (height and width are set).

If I don't remove the empty div in my function, then the browser will create the needed space and everything works correctly. However, I really need the blank space created by the div to be removed when the animation is complete.

Is there a way to queue up the div removall so that the browser will show the desired behavior?

Answer 1

Doesn't it work if you use a setTimeout ?-)

Answer 2

By doing a Google search on jQuery and setTimeout, I found an example which sent me down a different track. The problem occurs, I think, because the div manipulation is on a separate selector from the actual animation. This causes the div to be created and removed even while the animation is still occuring. By adding a simple animate statement to the div which delays the removal until after the main animation completes, then I can achieve the desired effect.

Answer 3

The problem is that the DOM isn't updated until your function ends. So using setTimeout will cause the dom to update and 100ms later the rest of your function can continue. If you don't want the new div to be seen, I'd set the position to absolute and the top to something like -5000. It will have dimensions etc, just wont' be visible. You can also set the visibility (in css) to hidden just incase you are worried it will show up on screen.

Answer 4

some jquery effects have callbacks which will are run after the effect ex:

$('#someDiv').slideDown(100, function() { $(this).remove(); } ) ;