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

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的hide+slide效果似乎是我想要的： http://jqueryui.com/demos/hide/ 如果我能将它与show+slide效果结合起来，我认为我可以使其正常工作。不过，我在想这是否是一个值得追求的好方案，或者是否有更简单的方法？我最担心的是滑入和滑出动画必须同步，否则看起来会很糟糕。

谢谢。

- user246114

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();
});

在这里你可以试一下。这里使用.delay()和.queue()手动排队替换/隐藏，以在隐藏开始后400毫秒发生（400毫秒是默认持续时间，如果给.hide()不同的持续时间，请进行更改）。 确保在结束时调用.dequeue() 或使用 .queue(function(n) { ...my stuff... n(); })，以便下次动画队列没有被卡住等待。

- Nick Craver

---

再次感谢你，尼克。你让我找到了正确的方向，我发现我想要创建的是一个旋转木马。这个项目足够简单，可以作为一个很好的起点：http://code.google.com/p/jquery-infinite-carousel/ - user246114