切换和移动未按预期工作答案

【问题标题】：toggling and moving not working as expected切换和移动未按预期工作
【发布时间】：2011-06-30 22:33:34
【问题描述】：

我是 jquery 和 jquery ui 的新手（约 2 周）。我刚刚回答了一个类似的问题，并提出了一些改进的想法。好无聊和学习新技能的愿望已经让我变得更好了。

我有一组列表项。我想一次显示 5 个。单击按钮后，我想要将第一个移到最后，隐藏它，然后切换到第六个。

我想使用切换和它附带的动画之一，但是，它的行为不正确，如以下小提琴所示：http://jsfiddle.net/HZqee/

我首先尝试了 .deatch() ，但这也不正常

HTML

<ul>
    <li class="slider"> Item-1 </li>
    <li class="slider"> Item-2 </li>
    <li class="slider"> Item-3 </li>
    <li class="slider"> Item-4 </li>
    <li class="slider"> Item-5 </li>
    <li class="slider"> Item-6 </li>
    <li class="slider"> Item-7 </li>
    <li class="slider"> Item-8 </li>
    <li class="slider"> Item-9 </li>
    <li class="slider"> Item-10 </li>
</ul>


<button> Next > </button>

JQUERY

$('li:gt(4)').css('display', 'none');

$("button").click(function() {  
    $('li:first').toggle('clip',100).insertAfter('li:last');
    $('li:eq(4)').toggle('scale', 100);
});

CSS

button { float: left; clear: both; }
ul { list-style: none; }
li { background: #eee; border: 1px solid #ddd; float: left; padding: 2em;  }

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

这个怎么样？

http://jsfiddle.net/HZqee/1/

我在切换之前移动了 insertAfter。

【讨论】：

打额头就这么简单。我知道我的想法是对的。谢谢！

【解决方案2】：

重温一下，我觉得下面的回答比较好

这来自我回答的另一个问题：here

当我对jquery 很陌生时，我回答了这个问题。从那以后，我学到了一些东西，在前几天晚上这个答案被投票后，我看了看这个答案。我最初对下一个元素如何快速进入并或多或少打破障碍感到不满意。 (see here)。我觉得处理这个问题的适当方法是在第一次切换后调用回调。

更新的 jquery

$('li:gt(4)').css('display', 'none');

    $("button").click(function() {
        $('li:first').insertAfter('li:last').toggle('clip', 100, function() {
            //called after the first .toggle() is finished
            $('li:eq(4)').toggle('scale', 100);
        });
});

查看更新后的live example。

.toggle()

.toggle( [duration,] [easing,] [callback] )
durationA string or number determining how long the animation will run.
easingA string indicating which easing function to use for the transition.
callbackA function to call once the animation is complete.

【讨论】：