David
David

Reputation: 369

JQuery chaining events (.html)?

I am trying to achieve a series of chained events, based on .html.

For example I have "What" in a H1, on hover I want this to sequentially change to "Communicate", "Effective", "Change" and then loop - with little bit of delay inbetween. On mouseout it needs to revert back to "What".

I can do the basic change to "communicate" and back to "What" on mouseout - but cannot chain the words with a delay in the middle. Below is what I have thus far.

$("h1.bleu").hover(
    function() { 
    $(this).html("Communicate");},
    function() { $(this).html("What");  
});

Thanks in advance!

Upvotes: 2

Views: 224

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

My solution is different to karim79's in that it cycles through each word as you hover on the H1 element, rather than changing on each successive mouseover.

var values = ["Communicate","Effective","Change"];
var interval;
var index = 0;

$("h1#test").hover(
    function() {
        interval = setInterval(changeText, 500);
    },
    function() {
        clearInterval(interval);
        index = 0;
        $(this).text("What");
    }
);

function changeText() {
    $("h1#test").text(values[index]);
    index = (index < values.length) ? index + 1 : 0;
}

Example fiddle here

Upvotes: 1

Related Questions