用幻灯片动画填充下一个元素的空间

Question

基本上我想要做的就是每当一个li被移除（通过jquery .remove（））时，li的滑动集合到之前占据移除的li的空间。我怎么能做到这一点？这是一些代码：

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

这里有一些javascript代码

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

默认行为是列表的其余部分将捕捉到该空间。我怎么用幻灯片来做呢？

对于其他示例，请在关闭面板时检查google wave的行为。其他面板滑入之前占用的空间

Answer 1

您可以使用slideUp效果，完成后，您可以删除DOM元素：

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

如果您的锚嵌套在其他元素中，则可以使用$(this).closest('li')代替parent()。

使用您的标记here检查示例。