toggling and moving not working as expected

I'm new to jquery and jquery ui (~2 weeks). I Just answered a similar question and suggested some ideas to improve. Well boredom and a desire to learn a new skill has gotten the better of me.

I have a set of list items. I want to show 5 at a time. once a button is clicked I want to move the first t开发者_如何学运维o the end, hide it, and toggle on the sixth one.

I want to use toggle and one of the animations that comes with it, however, it is not behaving properly as displayed in this fiddle: http://jsfiddle.net/HZqee/

I have tried .deatch() ing it first, but that does not behave properly either

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

How about this?

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

I moved the insertAfter before the toggle.

Revisiting this, I think the following is a better answer

this came from another question I answered: here

--

I answered this question when I was realitvely new to jquery. I have since learned a few things, and after this answer was upvoted the other night I gave this answer a look over. I was initially unhappy with how the next element would enter to quickly, and more or less break the block. (see here). I feel the appropriate way to handle this question was with a callback that is called after the first toggle.

updated 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);
        });
});

see the updated 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.