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?

Are you sure you are not removing the div before the animation is finished? How are you making sure the animation has completed? — SpoonMeiser
– SpoonMeiser, Commented Oct 2, 2008 at 10:50

Michał Perłakowski · Accepted Answer · 2016-02-21 15:03:23Z

3

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

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

edited Feb 21, 2016 at 15:03

Michał Perłakowski

93.3k30 gold badges165 silver badges189 bronze badges

answered Nov 5, 2008 at 0:03

SeanDowney

17.8k20 gold badges86 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joe Brinkman · Accepted Answer · 2008-10-02 11:29:49Z

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.

roenving · Accepted Answer · 2008-10-02 10:48:31Z

0

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

answered Oct 2, 2008 at 10:48

roenving

2,66015 silver badges14 bronze badges

Comments

Sugendran · Accepted Answer · 2008-10-02 23:56:19Z

0

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.

answered Oct 2, 2008 at 23:56

Sugendran

2,1091 gold badge14 silver badges15 bronze badges

Collectives™ on Stack Overflow

Adding and removing content in jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related