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 plete.

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

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 plete.

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

• javascript
• jquery

Share Improve this question Follow asked Oct 2, 2008 at 10:43 Joe BrinkmanJoe Brinkman 1,90222 gold badges1616 silver badges2020 bronze badges 2

• Could you provide the jQuery code you already have? – Philip Morton Commented Oct 2, 2008 at 10:45
• Are you sure you are not removing the div before the animation is finished? How are you making sure the animation has pleted? – SpoonMeiser Commented Oct 2, 2008 at 10:50

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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

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 pletes, then I can achieve the desired effect.

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

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.