заполнить пробел следующим элементом с анимацией слайда

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.