Im making a slide viewer there are 5 lis in the ul that show. how do i use j query to slide left on li so the li on the left is no longer seen and one of the ones not seen is shown?

Im making a slide viewer there are 5 lis in the ul that show. how do i use j query to slide left on li so the li on the left is no longer seen and one of the ones not seen is shown?

• javascript
• jquery
• html
• animation
• css

2 Answers 2

updated 30 jun 2011

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

old

JQUERY

    $('li:gt(4)').css('display', 'none');
    $("button").click(function() {  
    $('li:first').fadeOut('fast').insertAfter('li:last')
    $('li:eq(4)').fadeIn(); });

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>

and a fiddle http://jsfiddle/EZpMf/

This will be less rigid and use much less code. I also think it is very readable.

What this does is selects any li greater than 4 (zero based) and hides it. next when you click on the button it eases the first one out and inserts it at the end, and take the 4th one and eases it in. I suppose you could customize the animation. Using toggle and some of the animation effects supplied with jquery-ui. but this was a quick example.

EDIT after trying to improve this I asked my own question. I am pasting the answer+fiddle

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

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

http://jsfiddle/67Wu7/

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<br/>
<button> next </button>

CSS

li {
    float: left;   
    display: none; 
}

jQuery

$("li").filter(function(key) {
    return key < 5;
}).css("display", "inline");

$("button").click(function() {
    var lis = $("li");
    // place the first element at the end.
    var li = lis.first().detach().appendTo("ul");
    // show first 5
    $("li").filter(function(key) {
        return key < 5;
    }).css("display", "inline");
    // hide rest
    $("li").filter(function(key) {
        return key >= 5;
    }).css("display", "none");

});

Live Example