Delay .hover event...

Delay .hover event...

Hello,

I have this code:

$(document).ready(function(){

  $("#illustration-text").addClass("hide");

  $("#illustration-image").hover(
    function () {
      $("#illustration-text").removeClass("hide");
      $("#illustration-text").addClass("show");
    },

// Reseting
    function () {
      $("#illustration-text").removeClass("show");
      $("#illustration-text").addClass("hide");
    }
  );

});


What it does is pretty simple. Add a class and remove another when on mouse over, then, when the mouse is out, add the removed class and remove the added class (reseting it). Pretty straightworfard and it works perfectly.

I, though, have a small problem. I need the second function (the reseting one) to have a small delay on it... so, when the user leaves the area AND xx time has passed, THEN reset.

I've tried with this:


$(document).ready(function(){

  $("#illustration-text").addClass("hide");

  $("#illustration-image").hover(
    function () {
      $("#illustration-text").removeClass("hide");
      $("#illustration-text").addClass("show");
    },

// Reseting
    function () {
      $("#illustration-text").removeClass("show").delay(100);
      $("#illustration-text").addClass("hide").delay(100);
    }
  );

});


But the reset function just stops working completely. Any ideas?

Thanks for your time.