Question

I have a headline on a website I’m programming; let’s say the headline says "LIKE THIS".

I’d like the word THIS to continually change between THIS and THAT — without any fading effects, but at different intervals.

Let’s say I want the word THIS to be there at the beginning and stay there for 2 seconds. I then want it to change into TAHT (sic) but only for 200 milliseconds until changing into THAT and stay there for 3 seconds, until changing back to THIS, then starting the whole process over again.

I’m familiar with several looping/cycling plugins for jquery (Cycle, InnerFade, etc), but they all seem to want to add effects — and none of them seem to be able to provide the possibility of different intervals.

Hope to hear from someone. Thank you very much in advance.

//A.

Answer 1

Something to get you started:

HTML

<span id="text">THIS</span>​

JavaScript

function changeToTaht() {
    // Change text, and call changeToThat, in 200ms
    $('#text').text('TAHT');
    setTimeout(changeToThat, 200);        
}   

function changeToThat() {
    // Change text, and call changeToThis, in 3000ms
    $('#text').text('THAT');
    setTimeout(changeToThis, 3000);    
}

function changeToThis() {
    // Change text, and call changeToTaht, in 3000ms
    // This will make the loop run again, and again, and again...
    $('#text').text('THIS');
    setTimeout(changeToTaht, 3000);
}

$(document).ready(function() {
    // Start the loop by calling changeToTaht, in 1000ms 
    setTimeout(changeToTaht, 1000);
});

​jsFiddle: http://jsfiddle.net/Webye/