CODEWITHSUNDEEP
jquery
Alexandru Vlas
Alexandru Vlas

Reputation: 1415

show only first 3 elements from a list and then show next 3 loop

I have a list of 9 elemets (< li>)

What I'm trying to achieve is: show only the first 3 elements from the list, after 5 seconds hide the first 3 and show the next 3, then again hide these 3 and show the next 3, so hiding the current 3 and showing the next 3 loop..

Here is what I tried to write, but on my code I try to call the action on click of a link..

jQuery('#lbrecentcarousel li:gt(2)').hide();

jQuery('#lbrecentdiv h2 a').live('click',function() {
jQuery('#lbrecentcarousel li').not(':visible').each( function() {

    jQuery(this).slideDown();

});
});

Can somebody please help me on this... Thank you

Upvotes: 1

Views: 1013

Answers (2)

Alexandru Vlas
Alexandru Vlas

Reputation: 1415

Thank you everybody, I sorted it by writing this code:

var elements = jQuery("#lbrecentcarousel li");
var index = 0;

var showNextThree = function (index) {
    if (index >= elements.length) {
        index = 0;
    }
    console.log(index);
    elements.hide().slice(index, index+3).fadeToggle();
    setTimeout(function () {
        showNextThree(index + 3)
    }, 5000);
}
showNextThree(0);

Upvotes: 1

codingrose
codingrose

Reputation: 15699

Write:

setInterval(function(){
    var index = $("li:visible:last").index();
    var len = $("li").length;
    var open = 3;
    $("li:visible").hide();
    if(index == len-1){
        $("li:lt("+open+")").slideDown();
    }
    else{
        $("li").slice(index+1,index+open+1).slideDown();        
    }    
},1000);

Working demo here.

Upvotes: 2

Related Questions