CODEWITHSUNDEEP
javascriptjquery
Joe Brinkman
Joe Brinkman

Reputation: 1892

Adding and removing content in jQuery

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?

Upvotes: 2

Views: 7182

Answers (4)

SeanDowney
SeanDowney

Reputation: 17754

Some jQuery effects have callbacks, which will are run after the effect, for example:

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

Upvotes: 3

Sugendran
Sugendran

Reputation: 2109

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.

Upvotes: 0

Joe Brinkman
Joe Brinkman

Reputation: 1892

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.

Upvotes: 1

roenving
roenving

Reputation: 2636

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

Upvotes: 0

Related Questions