Question

How to set a timer for a fade effect? Say text1 will fade out in 5 seconds, then text2 will appear, then it will fade out after 5 seconds, then text3 will appear. I’m not knowledgeable in jQuery.

Say I have 3 texts:

<div class= "text1>Text 1</div>
<div class= "text1>Text 2</div>
<div class= "text1>Text 3</div>

I have only this:

$(".text1").fadeOut(5000); //now that a timers.

Answer 1

First of all, fix your invalid HTML and use different classes (ids would work, too, btw):

<div class="text1">Text 1</div>
<div class="text2">Text 2</div>
<div class="text3">Text 3</div>

Then use this JavaScript code:

function fade() {
    $('.text1').fadeIn().delay(5000).fadeOut();
    $('.text2').delay(5000).fadeIn().delay(5000).fadeOut();
    $('.text3').delay(10000).fadeIn().delay(5000).fadeOut(fade);
}
fade();

Demo: http://jsfiddle.net/ThiefMaster/hmRFB/1/