JQuery How to animate floating intervals after removing them from the DOM?

Question

Say I have 4 <span/> (or div, whatever)

[1] [2] [3] [4]

Each container has an input signal inside, due to which the container is removed from the DOM.

If I click on the tab in the container [2], it is deleted, and the container [3] and [4] moves to the left:

[1] [3] [4]

I wonder how to revive this process - to slow it down a bit?

Answer 1

It will depend on your CSS.

If they move left, then all you have to do is animate the width from # 2 to 0 before deleting it.

Example: http://jsfiddle.net/a6NPP/

 $(myspan).animate({width:0}, 600, function() { $(this).remove(); }); 

This implies the absence of a border / fill / field. If so, you will need to animate the properties to the left and right of them, or place each in the container using overflow:hidden and animate its width.

---

EDIT: If you want to use jQueryUI , it has many effects that you can use .

Answer 2

Apply some animation to the span and remove it in the callback function. Something like that:

 $('span').hide('slow',function(){ this.remove(); });