的slideToggle和李 - 反覆點擊重新排序列表

Question

點擊任何李項目在UL列表之後 - 所有項目顯示/隱藏除了一個點擊。我嘗試使用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線，將工作，只要你想..

演示在http://jsfiddle.net/rJHFW/1/

---

你可以簡化所有的代碼到

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

演示在http://jsfiddle.net/rJHFW/2/

---

更新（評論後）

您可以在動畫後做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'); 
     } 
    }); 
}); 

演示在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; 
    }); 
});