Question

In plain English, this code kicks in when an element is hovered over. When it’s hovered over, I add a class and show the element, then after 5 seconds, I reverse everthing: i.e. I fade out what I had previously shown and remove the class I previously added.

$("#it").addClass('somestyle').show();
setTimeout(function(){
   $("#it").fadeOut("normal", function(){ $(this).removeClass('somestyle'); });
}, 5000);

• Is my code clean or hacky?
• How to cancel those delayed actions (fadeout and class removal) if I element is hovered over again within those 5 delay seconds. If it’s hovered over again, I don’t want the planned delayed actions to actually happen.

Answer 1

Declare out of the function

    var timer;

and then inside the function:

$("#it").addClass('somestyle').show();
clearTimeout(timer);
timer=setTimeout(function(){
   $("#it").fadeOut("normal", function(){ $(this).removeClass('somestyle'); });
}, 5000);

With this code first you clear the timeout and then you set it again, so it will wait again when this function is triggered.