Input and output of text in text

Question

I am having problems with a slide in the Text slider:

HTML:

<div id="textSlider"> <ul> <li class="active">Doors | Windows | Showers</li> <li>Superb Fenestration | Superior Service</li> </ul> </div> <div class="clear"></div> 

JS:

 $('#textSlider ul li').each(function(){ setTimeout(function(){ $('.active').animate({'left': '0px'},500).delay(500).animate({'left': '-300px'},500); $(this).removeClass('active'); }, 2000); }); 

CSS

 #textSlider{ position: relative; left: 0; } ul{ list-style: none; } ul li{ position: relative; left: -300px; } .clear{ clear: both; } 

Fiddle

What I need:

I want the first line to turn on and then go out. After the first line, the second should do the same.

Then the function should repeat the whole process.

How to do it?

Answer 1

You can change your JavaScript to:

 setInterval(function(){ $('.active').animate({'left': '0px'},500) .delay(500) .animate({'left': '0px'},500) .animate({'left':'-300px'},500) .removeClass('active') .siblings('li') .addClass('active'); }, 2000); 

JSFiddle Demo

This will run endlessly every 2 seconds ...

Keep in mind that it will iterate over only 2 elements (as shown in your example), if you need to iterate over the number of elements n , you can try this:

 setInterval(function(){ var $current = $('.active').animate({'left': '0px'},500) .delay(500) .animate({'left': '0px'},500) .animate({'left':'-300px'},500) .removeClass('active'); if($current.next('li').length > 0) { $current.next('li').addClass('active'); } else { $current.siblings('li:eq(0)').addClass('active'); } }, 2000); 

Basically caching the current active element in the $current variable, using if to check if there is still <li> after it, in which case not, returning to the first <li> to add the active class ...

JSFiddle Demo 2

Finally . If you want the first loop to be different from the others, you can do something like this:

 setTimeout(function(){ loopList(); setInterval(loopList,4000); }, 1); function loopList(){ var $current = $('.active').animate({'left': '0px'},500) .delay(500).animate({'left': '0px'},500) .animate({'left':'-300px'},500) .removeClass('active'); if($current.next('li').length > 0) { $current.next('li').addClass('active'); } else { $current.siblings('li:eq(0)').addClass('active'); } } 

In this case, you first call the first iteration from setTimeout for the first time (this is the reason for 0 in this example), and then call setInterval , which will loop every 4 seconds.

JSFiddle Demo 3

Answer 2

Fiddle

I moved your logic to a separate function. The animate () method accepts a callback that changes the “active” li, and then calls itself again. This gives you an endless loop.

  function slide() { var activeElement = $('li.active'); $('.active').animate({ 'left': '0px' }, 500).delay(500).animate({ 'left': '-300px' }, 500, function() { var nextActiveElement = activeElement.next('li'); activeElement.removeClass('active'); if (nextActiveElement.length < 1) { nextActiveElement = $('li').first(); } nextActiveElement.addClass('active'); slide(); }); } slide(); 

Answer 3

You can use jquery callback to archive this:

 function showLi(){ $('#textSlider ul li').each(function(index, value){ setTimeout(function(){ $(value).animate({'left': '0px'},500).delay(500).animate({'left': '0px'},500).animate({'left':'-300px'},500); }, index*2000); }); } showLi(); setInterval(showLi, $("#textSlider ul li").length*2000); 

See http://api.jquery.com/jQuery.each/

The index is used to delay the timeout.

Check the forked script:

http://jsfiddle.net/3Dwkz/4/