Question

How I can change 2 texts with fadeIn() and fadeOut() jQuery effects?

Here is an example: Apple website.
Below the iPhone image is one box, “Hot News Headlines“. See how the news changes? One text fades in, then fades out, and the second is coming.

I’m new to jQuery so please give detailed code. Thanks!

Answer 1

Let’s say that your html is like this:

<div>
    <div class='fadey'>1</div>
    <div class='fadey'>2</div>
    <div class='fadey'>3</div>
</div>

You can do something like:

var faderIndex = 0, //to keep track
    faders = $('.fadey'); //cache, so we won't have to walk the dom every time

function nextFade() {

    //fade out element over 1000 milliseconds, after which call a function
    $(faders[faderIndex]).fadeOut(1000, function() {

        //increase the index and do a check, so we won't overflow
        faderIndex++;
        if (faderIndex >= faders.length)
            faderIndex = 0;

        //fade in the next element, after which call yourself infinitely
        $(faders[faderIndex]).fadeIn(1000, nextFade);
    });
}
//get the ball rolling
nextFade();

Live example: http://jsfiddle.net/gpQYW/