Question

Possible Duplicate:
"Flashing" random text with javascript

I can’t figure out how to make this maybe stupid thing.
I have several text phrases that I have to switch between and loop with fading transition.

How can I build this stuff in jQUery?
Thanks in advance.

Answer 1

HTML —

<div id="container">
    <p>Text 1</p>
    <p>Text 2</p>
    <p>Text 3</p>
    <p>Text 4</p>
</div>

CSS —

#container {
    position: relative;
}
#container p {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

JavaScript —

function rotate_p() {
    if (p_current == p_count) {
        p_current = 1;
    } else {
        p_current++;
    }
    var $container = $('#container');
    $container.find('p').fadeOut();
    $container.find('p:nth-child(' + p_current + ')').fadeIn();
}

var p_count;
var p_current = 0;
var p_interval;
$(document).ready(function () {
    p_count = $('#container').find('p').length;
    p_interval = setInterval(function () {rotate_p();}, 2500);
});

This uses an interval to loop through the <p> tags within a container <div>. The <p> tags are set to the same location so the fade in/out will appear on top of each other. On document load the number of <p> tags are found and stored in a global variable. The function that runs in the interval hides all the <p> tags within the containing <div> and then shows the next one in line.

Here is a jsfiddle of the above code: http://jsfiddle.net/Z8s7d/