Question

I have a button that changes the background of a div when its rolled over. the background needs to change on a timer so i have used setTimout to execute methods that change the backgrounds. I thought clearTimeout would cancel and timeouts i have set so i put this on the mouseleave event. However it doesnt seem to stop the timeouts. Is my logic right here?

$("#h2Buzz").mouseenter(function () {   
   setTimeout(playV(), 2700);
   setTimeout(playP(), 5400);
}); 
$("#h2Buzz").mouseleave(function () {
   clearTimeout(playV());
   clearTimeout(playP());
});


function playV() {
    $("#ServicesBackgroundImage2").css("background-image", "url(/images/v.jpg)");
}
function playPn() {

    $("#ServicesBackgroundImage2").css("background-image", "url(/images/p.jpg)");
}

Answer 1

Assign a variable to your setTimeout, which you then pass to clearTimeout to clear it, i.e.

var play_timeout = setTimeout("playV()", 2700);
clearTimeout(play_timeout);

(Note I added quotes around your first setTimeout argument)