我有一个列表。当用户执行某些操作时,我想替换所有列表内容,但是要呈现为新的列表数据从右向左滑动,旧的列表数据被推向左侧。例如:
<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效果结合起来,我认为我可以使其正常工作。不过,我在想这是否是一个值得追求的好方案,或者是否有更简单的方法?我最担心的是滑入和滑出动画必须同步,否则看起来会很糟糕。
谢谢。