settimeout on hover

Question

hi guys,

I am trying to use jquery's hover to clear one timeout (cleartimeout) on a set variable (timer) and then set another (settimeout) once the mouse leaves the element. Any ideas on how to do this?

My code so far (that doesn't work!!!!) is:

      $(function() {

      $('ul.contact').hover(function() {

      $(this).clearTimeout(timer).animate({ 'opacity' : 0.7});
      }, function() {
      $(this).setTimeout( function()
             {
          $('ul.contact').fadeOut('slow');
          }, 8000);
          });
      timer = setTimeout(function() {
       $('li#contact').removeClass('cur');
       $('li#$url').addClass('cur');
       }, 8625);


});

Answer 1

setTimeout() and clearTimeout() are functions of the (global) window object, so they should be called without an object. In your example, remove the "$(this)." before the calls to setTimeout and clearTimeout

Answer 2

You also can't chain a .animate() call off ot the clearTimeout() like you're trying to.

Answer 3

I have realised that I had not set another variable for the actual element I wanted to keep displayed. Have now set another variable and all works fine with the new code:

Many thanks for the tips though, they are also included!

            $(function() {

            $('ul.contact').hover(function() {

            clearTimeout(display);
 clearTimeout(timer);
 $(this).css('display', 'block');
            }, function() {
            $(this).fadeOut('slow');
   $('li#contact').removeClass('cur');
   $('li#$url').addClass('cur');
   }); 

});

Answer 4

The hoverIntent jQuery plugin might help. It allows you to tune the sensitivity of a mouseover:

http://cherne.net/brian/resources/jquery.hoverIntent.html

...which I suspect is what you are trying to do.