fill in space with the next element with slide animation

Question

basically what I wanted to do is whenever an li is removed (via jquery .remove()) the set of li's slide to the space previously occupied the removed li. How can I accomplish this? Here is some code:

<li class="be-imagecontainer"> 
<span style="display:none">101</span> 
<img src="http://localhost/thi/media/images/thumbnails/19_Koala.jpg" class="be-image" alt="19_Koala.jpg" /> 
<br/> 
<a href="http://localhost/thi/ajax/deleteimg/101.html" class="be-delete">Delete</a> 
</li> 
<li class="be-imagecontainer"> 
<span style="display:none">111</span> 
<img src="http://localhost/thi/media/images/thumbnails/19_Penguins.jpg" class="be-image" alt="19_Penguins.jpg" /> 
<br/> 
<a href="http://localhost/thi/ajax/deleteimg/111.html" class="be-delete">Delete</a> 
</li> 
<li class="be-imagecontainer"> 
<span style="display:none">112</span> 
<img src="http://localhost/thi/media/images/thumbnails/19_Hydrangeas.jpg" class="be-image" alt="19_Hydrangeas.jpg" /> 
<br/> 
<a href="http://localhost/thi/ajax/deleteimg/112.html" class="be-delete">Delete</a> 
</li>

and here is some javascript code

$('a.be-delete').click(function(){
 $(this).parent().remove();
 // code to slide the rest of the divs the unoccupied space
})

the default behavior is that the rest of the list will snap to that space. How do I do that with a slide instead?

for other examples, check google wave's behavior when u close a panel. The other panel/s slide in to the previously occupied space

Answer 1

You can use the slideUp effect, and when it finishes, you can remove the DOM element:

$('a.be-delete').click(function(){ 
  $(this).parent().slideUp('slow',  function () { 
    $(this).remove(); // remove the li
  }); 
  return false; 
})

You can use $(this).closest('li') instead of parent() if your anchor is nested in some other element.

Check an example with your markup here.