hovering: fadeIn, delay, fadeOut. [not working]

Question

Hey all,

apologies as this has been asked many times, but I tried the related solutions, and they do not work well for me. on www.Handonam.com/sloshspot, i'm trying to create a hover event where it fades in fast when you hover, then delay and fade out slow when you mouse out from it. I attempted it with this (which is on the site):

$("#subHome").fadeTo("slow", 0);
$("#button1").hover(function(){
   $("#subHome").stop().fadeTo("fast", 1.0),
   $("#subHome").delay(2000).fadeOut("slow");
 }); 

but it is buggy because it won't let me fade in again. I also tried separating them into mouseover and mouseout events, and they don't work as well.

Anyone know how I can make this fluid?

Answer 1

var timerId;

$("#subHome").fadeTo("slow", 0);
$("#button1").hover(function(){
    clearTimeout(timerId);
    $("#subHome").fadeTo("fast", 1.0);
}, function() {
    timerId = setTimeout(function() {
        $("#subHome").fadeOut("slow");
    }, 2000);
}); ​

Answer 2

wow that's the answer! thank you, sje397! i had no idea you needed to clear the timer during hover in. :(