切换和移动不按预期工作

Question

我是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;  }

Answer 1

这个怎么样？

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

我在切换之前移动了insertAfter。

Answer 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.