Slide Text In and Out

Question

I am having issues with a slide in 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 slide in, then out. After the first line, the second one should do the same.

Then the function should repeat the whole process

How do I do that?

Answer 1

You could 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 loop indefinitely every 2 seconds...

Keep in mind it'll only iterate over 2 elements (as shown on your example), if you need it to iterate over n number of elements, you can try this instead:

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 on the $current variable, using the if to check if there's another <li> after it, and it case there's none, going back to the first <li> to add the class active...

JSFiddle Demo 2

Finally, If you want the first loop to be different than the other ones, you could 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'd be calling the first iteration from the setTimeout the first time right away (that's the reason for the 0 in this example), and then calling the setInterval which will loop every 4 seconds.

JSFiddle Demo 3

Answer 2

FIDDLE

I moved your logic into a separate function. The animate() method takes a callback that will change the 'active' li then just call itself again. That gives you the infinite looping.

    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();