Looping javascript?

Question

I am new to js, and jquery, and I am trying to fade in and out list items. Im using the jQuery Cycle Plugin (with Transition Definitions). Its working just fine, however I need this to loop. I am sure its something simple. However I cannot find a answer.:(

<script type="text/javascript">
function InOut( elem )
{
  elem.delay()
 .fadeIn(400)
 .delay(5000)
 .fadeOut( 
           function(){ InOut( elem.next() ); }
         ) ;
}

$(function(){
$('#newsticker li').hide();
InOut( $('#newsticker li:first') );

});
</script>

i tried putting a for loop around it, but that breaks it... – Jef Rechards Jul 22 '13 at 07:26 — Jef Rechards, Jul 22 '13 at 07:26
Can you add your code to a jsFiddle? (with your HTML) – Pieter Jul 22 '13 at 07:29 — Pieter, Jul 22 '13 at 07:29
http://jsfiddle.net/B2BDc/2/ – Jef Rechards Jul 22 '13 at 07:43 — Jef Rechards, Jul 22 '13 at 07:43

score 0 · Answer 1 · answered Jul 22 '13 at 07:39

Try this:

<p id=elem>Here is some text</p>

<script>
var iv = setInterval(function() {$("#elem").fadeIn(400).fadeOut(400);},2000);
</script>

setInterval will continue executing until you ask it to stop. The function will fade in and out your element every couple of seconds. There's a fiddle

score 0 · Answer 2 · answered Jul 22 '13 at 07:46

0

How about checking if the currently active list item is the last. If it is, go back to the first, like so:

if($("li:last").next().length === 0( {
    $("li:last").fadeOut();
    InOut( $("#newsticker li:first") );
}

I did something similar to allow cycling through a list of thumbnails as a jsFiddle slideshow mockup.

answered Jul 22 '13 at 07:46

Matt

448
3
7

You may need to change the `if($("li:last")` to check for your specific, active element to make sure that the currently active element is the last in the list. In my jsFiddle you can see I've added a class to the active list item to work around this – Matt Jul 22 '13 at 07:58

score 0 · Accepted Answer · edited Jul 22 '13 at 09:11

$(function(){

$('#newsticker li').hide();
InOut( $('#newsticker li:first') );

var lengthUl = $('#newsticker').children().length;
var i = 0
function InOut( elem )
{
     elem.delay().fadeIn(100).delay(100).fadeOut(function() {
            i++;
            InOut(elem.next());
            if(i == lengthUl){
                InOut( $('#newsticker li:first') );
                i = 0;
            }
        }   
    ) ;
}
});

Just use this as your script.

Added a js Fiddle Link too: Enjoy !

http://jsfiddle.net/shubham59/xmRqG/1/

Looping javascript?

3 Answers3