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效果结合起来，我想我可以让它发挥作用。我想知道这是否是一个很好的解决方案，或者是否有更简单的方法？我最担心的是，幻灯片和幻灯片动画必须同步，否则它看起来会很糟糕，

由于

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()手动将替换/隐藏排队，以便在隐藏开始后400ms发生（400ms是默认持续时间，如果您给.hide() 不同，则更改持续时间）。请务必在最后调用.dequeue()或使用.queue(function(n) { ...my stuff... n(); })，以便下次动画队列不会停留等待。

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

1 个答案: