Reputation: 369
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
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;
}
Upvotes: 1