使用幻灯片动画显示/隐藏列表？

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(); })，以便下一次动画队列不会卡住。