delay() or timeout with stop()?

Question

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


        

Answer 1

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 2

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 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 .