delay() or timeout with stop()?

Question

$('.file a').live('mouseenter', function() {
    $('#download').stop(true, true).fadeIn('fast');
}).live('mouseleave', function() {
    $('#download').stop(true, true).fadeOut('fast');
});

I want the mouseenter function to have a stop() and a delay of 1 second. So, if I hover over #download the fadeIn should start after a 1 second delay. If I mouse out meanwhile the fadeIn shouldn't start. Get me?

I don't really know how to do that, any ideas?

Answer 1

You need to use setTimeout() in this case because of how .delay() works (and your inability to cancel it).

$('.file a').live('mouseenter', function() {
  $.data(this, 'timer', setTimeout(function() {
      $('#download').stop(true, true).fadeIn('fast');
  }, 1000));
}).live('mouseleave', function() {
  clearTimeout($.data(this, 'timer'));
  $('#download').stop(true, true).fadeOut('fast');
});

You can give it a try here.

If you use .delay() it'll dequeue the next animation for the element, regardless of if you cleared that queue earlier. So you need a timeout that you can cancel, which the above does by manually calling setTimeout() and storing the result with $.data() so you can clear it later, via clearTimeout().

Answer 2

I was looking for the answer to a similar question, and I found that .animate() could also be used to handle this, and it obeys .stop()

It would look something like this:

$('.file a').live('mouseenter', function() {
    $('#download')
        .stop(true, true)
        .animate({opacity:0}, 1000);            // one second delay
        .animate({opacity:1}, 'fast', 'swing');
}).live('mouseleave', function() {
    $('#download')
        .stop(true, true)
        .animate({opacity:0}, 'slow', 'swing');
});

Answer 3

Use a setTimeout function

$('.file a').live('mouseenter', function() {
setTimeout(function(){
    $('#download').stop(true, true).fadeIn('fast');
}, 1000);
}).live('mouseleave', function() {
    $('#download').stop(true, true).fadeOut('fast');
});

setTimeout will execute the code inside the function after the specified miliseconds (in this case 1000).

Answer 4

you can use this on jquery without using delay event .

$('.file a').hover(function() {
  time = setTimeout(function() {
     $('#download').fadeIn();
  },1000);
},function(){
    clearTimeout(time);
});

1000 is your time that after it $('#download') will fade in .