使用幻燈片動畫顯示/隱藏列表？

Question

我有一個列表。當用戶執行某些操作時，我想要替換所有列表內容，但將其呈現爲新列表數據從右向左滑動，並將舊列表數據推送到左側。例如：

<ul id='content'> 
    <li>red</li> 
    <li>green</li> 
</ul> 

現在，當用戶按下例如按鈕，我將有新的列表內容：

<ul id='content'> 
    <!-- 
    replace list item content now. 
    the old red,green items should slide off to the left. 
    the new yellow,purple items should slide in from the right 
    --> 
    <li>yellow</li> 
    <li>purple</li> 
</ul> 

我不知道我怎麼會從所有的老li元素滑出從左到右，jQuery的UI的隱藏+滑動效果似乎是我想要什麼，但：

http://jqueryui.com/demos/hide/

如果我能結合起來，與節目+幻燈片效果，我想我可以GE它工作。我想知道，如果這是一個很好的解決方案，或者有更簡單的方法去？我最關注的是滑動式和滑蓋式的動畫將不得不以其他方式同步上漲，它會看起來很糟糕，

感謝

Answer 1

你會碰上這裏的輕微的問題是slide動畫沒有按」牛逼隊列（不知道誰做那燦爛​​的決定），所以你需要排隊你自己，就像這樣：

$("#content").hide('slide').delay(400).queue(function() { 
    //replace then show new items 
    $(this).html("<li>yellow</li><li>purple</li>").show('slide').dequeue(); 
}); 

You can give it a try here。這使用.delay()和.queue()手動排隊更換/躲則躲開始發生後，400毫秒（400ms的是默認的持續時間，變化如果你給一個.hide()不同時間）。請確保在最後撥打.dequeue()或使用.queue(function(n) { ...my stuff... n(); })，以便下一次動畫隊列不會卡住。