CODEWITHSUNDEEP
jquery
zsharp
zsharp

Reputation: 13756

jquery, timer or chaining functions?

how best to go about cycling through li's and repeating?

should i use a timer or is there a better way?

for example, i want to display li one at a time. when i hit the end i want to go back to top and start again.

Upvotes: 1

Views: 254

Answers (3)

munch
munch

Reputation: 6321

The new jQuery delay() could come in handy here.

$(document).ready(function(){
    $('ul li').hide();

    function loopLi(element){
       element.fadeIn('slow').delay(5*1000).fadeOut('slow');
       var newElement;
       if(element.is(':last')){
          newElement = element.parents('ul').find('li:first');
       }else{
          newElement = element.next();
       }

       loopLi(newElement);
    }

    loopLi($('ul li:first'));

});

UPDATE:

.delay() isn't all that I thought it would be. Seems to work in an asynchronous manner, allowing other functions to be called before the li fades in. Here's a better way, with an interval 

$(document).ready(function(){
    $('li:first').addClass('current');
    $('li:not(:first)').hide();

    var slideshow = setInterval(function (){
       $('li.current').fadeOut('slow');
       var nextElement;
       if($('li.current').is(':eq('+ $('li').length +')')){
         nextElement = $('li:first');
       }else{
         nextElement = $('li.current').next();
       }

       $('li.current').hide().removeClass('current');
       nextElement.addClass('current').fadeIn('slow');
    }, 10*1000);

});

Upvotes: 1

prodigitalson
prodigitalson

Reputation: 60413

If you need more feature you could use jCarousel or another carousel type plugin. Not sure what you need your presentation to look like so this may or may not be more trouble than its worth.

Upvotes: 0

Andy E
Andy E

Reputation: 344567

Not sure if I understood your question correctly, but I'll have a stab at it.

Timers are useful when performing animations, or if you think there's going to be a lot of iterations (so as to not hog the thread).

If you're just creating a few LI elements and appending them to a UL element, and you don't want them to be shown incrementally (like in an animation), just use a for loop.

Upvotes: 1

Related Questions