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

Question

我有一个 list 。当用户执行某些操作时，我想替换所有列表内容，但将其呈现为好像新列表数据从右向左滑入，而旧列表数据被推到左侧。示例:

<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/

如果我可以将其与显示+幻灯片效果结合起来，我想我可以让它工作。我想知道这是否是一个好的解决方案，或者是否有更简单的方法？我最担心的是滑入和滑出动画必须同步，否则看起来会很糟糕，

谢谢

Answer 1

您在这里遇到的小问题是幻灯片动画不会排队(不确定是谁做出了这个明智的决定)，因此您需要自己排队，如下所示:

$("#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 毫秒发生(400 毫秒是默认持续时间，如果您给 .hide() 一个不同持续时间，请更改)。确保最后调用 .dequeue() 或使用 .queue(function(n) { ...my stuff... n(); }) 所以动画队列下次不会陷入等待。