SlideToggle и Ли - повторил нажав перезаказа список

Question

После нажатия на любой Li элемент в уль список - все пункты показать/скрыть кроме один щелчок. Я стараюсь делать приятные анимации, используя slideToggle. Но при многократном нажатии на один и тот же список элементов измените порядок списка.

jsfiddle example

HTML:

<ul class="imp"> 
    <li style="background: hotpink;">1</li> 
    <li style="background: lightgreen;">2</li> 
    <li style="background: lightblue;">3</li> 
    <li style="background: bisque;">4</li> 
    <li style="background: pink;">5</li> 
    <li style="background: wheat;">6</li> 
</ul> 

JQuery

$('li').click(function() { 
    if ($(this).closest('ul').find('li').is(':hidden')) { 
     $(this).prependTo(".imp").fadeIn("slow"); 
    } 
    $(this).closest('ul').find('li').not($(this)).slideToggle("slow", function() { 
     if ($(this).closest('ul').find('li').is(':hidden')) { 
      $(this).prependTo(".imp"); 
     } 
    }); 
}); 

CSS

ul{ 
    list-style: none; 
} 
li { 
    cursor: pointer; 
    width: 100px; 
    background-color: red; 
    text-align: center; 
    height: 25px; 
} 

Answer 1

Почему вы используете метод prependTo?

Это изменяет DOM, и именно поэтому это происходит ..

если вы удалите две prependTo линии он будет работать, как вы хотите ..

Demo вhttp://jsfiddle.net/rJHFW/1/

---

И вы можете упростить весь свой код до

$('li').click(function() { 
    $(this).siblings().slideToggle('slow'); 
}); 

Demo вhttp://jsfiddle.net/rJHFW/2/

---

Update (после комментария)

Вы можете сделать prependint после завершения анимации

Вот код, чтобы сделать это (с некоторыми чеками, брошенными в)

$('li').click(function() { 
    var self = $(this), 
     siblings = self.siblings(), 
     count = siblings.length, 
     show = siblings.is(':hidden'), 
     inprogress = siblings.is(':animated'); 

    // early break if an animation is still in progress 
    if (inprogress) return; 


    // slidetoggle 
    // and change position only after the animation is complete 
    siblings.slideToggle('slow', function(){ 
     count--; 
     if(count === 0 && !show){ 
      self.prependTo('.imp'); 
     } 
    }); 
}); 

Demo вhttp://jsfiddle.net/rJHFW/4/

Answer 2

Две идеи:

попробовать работать с $().stop(): http://jsfiddle.net/bPTZM/1/

$('li').click(function() { 
    if ($(this).closest('ul').find('li').is(':hidden')) { 
     $(this).prependTo(".imp").stop().fadeIn("slow"); 
    } 
    $(this).closest('ul').find('li').not($(this)).stop().slideToggle("slow", function() { 
     if ($(this).closest('ul').find('li').is(':hidden')) { 
      $(this).prependTo(".imp"); 
     } 
    }); 
}); 

В качестве альтернативы можно также предотвратить щелчки в то время как анимация работает: http://jsfiddle.net/bPTZM/2/

var animating = false; 
$('li').click(function() { 
    if(animating) return; 
    else animating = true; 

    if ($(this).closest('ul').find('li').is(':hidden')) { 
     $(this).prependTo(".imp").fadeIn("slow"); 
    } 
    $(this).closest('ul').find('li').not($(this)).slideToggle("slow", function() { 
     if ($(this).closest('ul').find('li').is(':hidden')) { 
      $(this).prependTo(".imp"); 
     } 
     animating = false; 
    }); 
});