用幻燈片動畫填充空間下一個元素

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的行爲。在先前佔據的空間等面板/ s的滑動

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檢查一個例子。