How to make this jQuery animation code loop forever?

Question

i am trying to create a loop of text animations over a slider... i tried loop but it didnt work.. Can you please tell me how do i loop this script forever..thanks

<script>
$(document).ready(function() {
    $("#header").hide();
    var headerOne='I';
    var headerTwo='Am'; 
    var headerThree='So';
    var headerFour='Cool';
        $("#header").html(headerOne);
    $("#header").fadeIn(1000);
    $('#header').delay(1000).fadeOut(1000,function(){
    $(this).html(headerTwo).fadeIn(1000);
     $('#header').delay(1000).fadeOut(1000,function(){
     $(this).html(headerThree).fadeIn(1000);
     $('#header').delay(1000).fadeOut(1000,function(){
     $(this).html(headerFour).fadeIn(1000).delay(1000).fadeOut(1000);       
      });
        });
    });

});
</script>

Thanks!

Setinterval could help `setInterval("javascript function",milliseconds);` — Ron van der Heijden, Jan 23 '13 at 07:39
@Bondye if that was an answer it would deserve two downvotes - one for mixing `setInterval` with jQuery animations, and another for passing a string to `setInterval`. — Alnitak, Jan 23 '13 at 07:49

Alexander · Accepted Answer · 2013-01-23T08:02:20.113

12

If you clean your code a bit. You can realize that setInterval is not needed. Simply make use of the last callback to repeat the animation.

$(function () {
    var $header = $("#header");
    var header = ['I', 'Am', 'So', 'Cool'];
    var position = -1;

    !function loop() {
        position = (position + 1) % header.length;
        $header
            .html(header[position])
            .fadeIn(1000)
            .delay(1000)
            .fadeOut(1000, loop);
    }();
});

See it here.

edited Jan 23 '13 at 08:02

answered Jan 23 '13 at 07:51

Alexander

23,432
11
63
73

except there's no need for the `.queue` function because the `.html` call is always the first function in the chain. – Alnitak Jan 23 '13 at 07:58
Yeah, because of the reordering – Alexander Jan 23 '13 at 07:59
you should perhaps explain the IIFE, though. – Alnitak Jan 23 '13 at 12:26
Bravo. I like how you declare a named function and then execute it with the "!()" with recursion. That is the most efficient way of doing this I've seen yet and adding that to my mental toolkit. – King Friday Feb 16 '13 at 16:55
@zipstory.com, yeah, they don't necessarily need to be anonymous though ;) – Alexander Feb 16 '13 at 17:00

score 0 · Answer 2 · answered Jan 23 '13 at 07:45

You can use recurence, the last fadeOut will execute repeat function when finish.

function repeat() {
    $("#header").hide();
    var headerOne='I';
    var headerTwo='Am'; 
    var headerThree='So';
    var headerFour='Cool';
    $("#header").html(headerOne);
    $("#header").fadeIn(1000);
    $('#header').delay(1000).fadeOut(1000,function() {
        $(this).html(headerTwo).fadeIn(1000);
        $('#header').delay(1000).fadeOut(1000,function() {
            $(this).html(headerThree).fadeIn(1000);
            $('#header').delay(1000).fadeOut(1000,function() {
                $(this).html(headerFour).fadeIn(1000).delay(1000).
                    fadeOut(1000, repeat); 
            });
        });
    });
}

$(document).ready(function() {
    repeat();
});

or `$(document).ready(repeat)`, if that's the only function being called — Alnitak, Jan 23 '13 at 07:47

score -1 · Answer 3 · answered Jan 23 '13 at 07:52

Create a recursive and self-executing function and use it as the final callback:

p.s. Took the liberty to clean up your code.

$(function () {
    (function repeat() {
        var header = $("#header"),
            headerOne = 'I',
            headerTwo = 'Am',
            headerThree = 'So',
            headerFour = 'Cool';

        header.text(headerOne)
            .fadeIn(1000)
            .delay(1000)
            .fadeOut(1000, function () {
            header.text(headerTwo)
                .fadeIn(1000)
                .delay(1000)
                .fadeOut(1000, function () {
                header.text(headerThree)
                    .fadeIn(1000)
                    .delay(1000).fadeOut(1000, function () {
                    header.text(headerFour)
                        .fadeIn(1000)
                        .delay(1000)
                        .fadeOut(1000, repeat);
                });
            });
        });
    })();
});

Alexander did a far better job of cleaning up the code... Apart from some minor syntax differences this code is otherwise the same as jcubic's. — Alnitak, Jan 23 '13 at 07:53
@RyanComputerProgrammer IMHO you've accepted the wrong answer. — Alnitak, Jan 23 '13 at 07:56

How to make this jQuery animation code loop forever?

3 Answers3

Linked