Zack Reid Zack Reid - 7 months ago 12
Javascript Question

After text fade cycle page loads?

The title is a bit vague, sorry about that.

I am wanting say three divs (just some text in them) to run through a cycle once.

This would be on page load. After this is played the site will finally be displayed.

I would like this to only happen once when you first come to the site as it would be annoying having to sit through it more than once. As the user will be constantly going back to the page this will be on.

Before I posted this I had one more look and found this Jsfiddle

http://jsfiddle.net/hungerpain/NMSpx/1/


Here is the JavaScript from the Jsfiddle

function tick() {
var $obj = $(".major_data .commitment_box .commitment");
$obj.first().fadeIn().delay(1000).fadeOut(function () {
$obj.first().insertAfter($obj.last());
tick();
});
}
tick();


It is more and less what I want but for it to stop at the last div and it is only played once.

I feel that I might have to make a page with this separate and make the JavaScript load in a new page instead of the last div. This way I can just link the user back to this page without the animation?

Answer

To make it cycle a specific number of times, just add a counter to the tick() function:

var i = 0;
function tick() {
    if (i > 3) return;
    var $obj = $(".major_data .commitment_box .commitment");

    $obj.first().fadeIn().delay(1000).fadeOut(function () {
        $obj.first().insertAfter($obj.last());
        i++;
        tick();
    });
}
tick();