CODEWITHSUNDEEP
jqueryloopscarousel
Ali
Ali

Reputation: 10453

Infinite loop on list item in unordered list using jQuery

I have this list of item

<div id="lessonThree">
<a class="next" href="#">Next</a>

 <ul class="sponsors">
    <li>Chicago Community Trust</li>
    <li>Chicago Instructional Technology Foundation</li>
    <li>City of Chicago</li>
    <li>Corporation for Public Broadcasting</li>
    <li>U.S. Department of Energy</li>
    <li>Ford Foundation</li>
    <li>Google</li>
    <li>Intel</li>
    <li>Knight Foundation</li>
    <li>MacArthur Foundation</li>
    <li>National Endowment for the Arts</li>
    <li>NESTA</li>
    <li>The Nominet Trust</li>
    <li>National Science Foundation</li>
    <li>Ontario Trillium Foundation</li>
    <li>Social Science Research Council</li>
    <li>Alfred P. Sloan Foundation</li>
    <li>Telefonica</li>
    <li>ZeroDivide</li>
  </ul>    
</div>

What I'm trying to achieve here is that I want to set a limit of how many item should be display at the time.

var MAX_ITEM = someNumbers // this will be define in the javascript file

So if say they have the maximum item to display at the time is : 3 what I really want is to let them fadeIn using jQuery one by one and when it reaches the MAX_ITEM I want that to have a delay of say 1500 millseconds using setTimeOut or something similar to display that for a bit then the three of the items will be fadeOut and starting the next three items and so on as an infinite loop.

The next button is to be used to speed to the next item as if they want to make it move faster.

I used to use this plugin CarofredSel but really that impact a lot of page load in our webapp, and it has a lot of restriction on the style which I can't really control.

Can anyone suggest me a way or any example, so that I can accomplish this?

This is the code I was starting with 

$('ul > li').each(function(i, element) {
    $(element).delay(i * 2000).fadeIn();
});

But the above code will only loop through each of the list items and then will stop at the end.

Update:

I have did a bit more research "On Stackoverflow" There are a lot of good examples and this is one closest to what I want, but I can't accomplish what I want exactly.

var counter = 0;
var limit = 3;

function fadeInSequence(li){
    var next = $(li).next('li')!=null?function(){fadeInSequence($(li).next('li'));}:function(){};
    $(li).fadeIn(2000,next);
    counter++;
    if(counter == limit){

        counter = 0;
    }

}
fadeInSequence($('.sponsors>li:first'));

http://jsfiddle.net/zdqCz/84/

The above code will fadeIn through all the items in the list, but not infinite and what I want now here is the same as the above where I want to only display 3 items then fadeOut and show the next 3.

Upvotes: 1

Views: 1538

Answers (1)

r0m4n
r0m4n

Reputation: 3512

So your update was a good start... I adapted it to include 3 items (jquery selector) rather than 1 and added a fadeOut on the callback of fadeIn to achieve the cycle what you were looking for. After the callback reaches the end of the list, we start over. See below

function fadeInSequence($three) {
    //default to the first three list items
    if ($three == null) $three = $('.sponsors>li:lt(3)');

    //fade in the 3 found
    $three.fadeIn(2000, function () {
        //fade out the 3 after fadein and start
        $(this).fadeOut(2000);
    }).promise().done(function () {
        if ($three.last().nextAll(':lt(3)').length) {
            //Same function, next 3 items
            fadeInSequence($three.last().nextAll(':lt(3)'));
        } else {
            //Same function, from the beginning if none are left
            fadeInSequence();
        }
    });
}

$(function () {
    //start the infinite looping
    fadeInSequence();
});

http://jsfiddle.net/Q3DTC/4/

For a fadeIn for each of the 3 items: http://jsfiddle.net/Q3DTC/6/

Upvotes: 2

Related Questions