jQuery Сортировка, последовательность элементов

Question

У меня есть набор заголовков и разделов в файле HTML5, который использует слайд-теги для отображения/скрытия содержимого. Кроме того, у меня есть сортировка, позволяющая сортировать список. Хотя это не действительно неупорядоченный или упорядоченный список. Все это прекрасно работает.

jsFiddle with working toggles and sortables.

Вы увидите, нажав на «заголовок» будет переключать соответствующий раздел. Нажатие на «Перетаскивание» переместит элемент в начало списка. Перетаскивание нажатием кнопки «Перетаскивание» позволяет сортировать элементы путем перетаскивания.

У меня есть последовательность щелчков для перемещения вверх. Я хотел бы, чтобы элемент исчезал ... prepend .. затем исчезает. Что происходит, это Prepend, fadeOut, затем fadeIn.

Я пробовал использовать delay() и stop() без везения.

Любая помощь будет оценена по достоинству.

Хотя весь код находится в ссылке на скрипку выше, я включаю его здесь, поэтому вопрос также является автономным.

HTML

<div id="container"> 
    <div class="listing"> 

    <div class="item"> 
     <header class="shead"> 
      <h1><span class="drag">DRAG</span><a href="#hold1" class="slide">title 1</a></h1> 
     </header> 

     <section id="hold1" class="eps hidden"> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
     </section> 
     <div class="clear"></div> 
    </div> <!-- //item --> 

    <div class="item"> 
     <header class="shead"> 
      <h1><span class="drag">DRAG</span><a href="#hold2" class="slide">title 2</a></h1> 
     </header> 

     <section id="hold2" class="eps hidden"> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
     </section> 
     <div class="clear"></div> 
    </div> <!-- //item --> 

    <div class="item"> 
     <header class="shead"> 
      <h1><span class="drag">DRAG</span><a href="#hold3" class="slide">title 3</a></h1> 
     </header> 

     <section id="hold3" class="eps hidden"> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
     </section> 
     <div class="clear"></div> 
    </div> <!-- //item --> 

    <div class="item"> 
     <header class="shead"> 
      <h1><span class="drag">DRAG</span><a href="#hold4" class="slide">title 4</a></h1> 
     </header> 

     <section id="hold4" class="eps hidden"> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
      <p class="new">&raquo; item &laquo;</p> 
     </section> 
     <div class="clear"></div> 
    </div> <!-- //item --> 

    </div><!-- //listing -->   
</div>​ 

CSS

#container { padding: 30px; } 

a.slide { 
    display: block; 
    font: bold 18px Verdana, sans-serif; 
    text-decoration: none; 
    color: #f00;} 

.shead { 
    background: #eee; 
    padding: 5px; 
    border: 1px solid #aaa;} 

.shead:hover{ 
    display: block; 
    background: #aaa; 
    -webkit-transition: .3s;} 

.hidden { display: none; } 

.shead h1 { 
    cursor: pointer; 
    font-weight: bold; 
    padding: 8px; 
    text-transform: uppercase;} 

.eps { 
    background: #aaa; 
    border: 1px solid #aaa; 
    border-top: none;} 

.eps p { 
    font-size: 12px; 
    padding: 5px 10px; 
    background: #eee; 
    margin: 1px 0;} 

.drag { 
    float: right; 
    font-weight: normal; 
    cursor: move; 
    position: relative;} 

.clear { clear: both; } 

.place { background: #f00; } 
​ 

JQuery

$("a.slide").click(function() { 
    var eplink = $(this).attr("href"); 
    $(eplink).slideToggle(500, "easeInOutSine"); 
    return false; 
}); 


$('#container').sortable({ 
    items: '.item', 
    axis: 'y', 
    cursor: 'move', 
    connectWith: '.shead', 
    forceHelperSize: true, 
    forcePlaceholderSize: true, 
    handle: '.drag', 
    placeholder: 'place', 
    scroll: true, 
    delay: 200, 
    tolerance: 'pointer' 
    }); 
    $('.drag').disableSelection(); 


$('.drag').click(function(event) { 
     var stuff = $(this).closest('.item'); 
     $(stuff) 
      .fadeOut(500) 
      .prependTo('.listing') 
      .fadeIn(500); 
    });​ 

То, что я действительно люблю это плавная анимация в верхней части списка, но я не думаю, это возможно. Поэтому я решил угаснуть, двигаться, затухать. Но не может заставить это работать в правильной последовательности.

Answer 1

Функция fadeOut принимает необязательный параметр обратного вызова, который должен быть вызван после завершения анимации.

Таким образом, чтобы решить конкретную проблему:

$(stuff) 
     .fadeOut(500, function() { 
      $(stuff).prependTo('.listing') 
        .fadeIn(500); 
     }) 

См this jsFiddle update