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?

@user239831 - Do you have an outstanding question on this? – Nick Craver Nov 12 '10 at 13:03 — Nick Craver, Nov 12 '10 at 13:03

Nick Craver · Accepted Answer · 2010-07-25T12:41:41.997

25

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

edited Jul 25 '10 at 12:41

answered Jul 25 '10 at 12:35

Nick Craver

623,446
136
1,297
1,155

Excellent. It is very important about delay. I still know of no way to cancel which means it should be used very carefully. This was a great way to deal with that. Thanks. – Jake Jun 22 '12 at 21:58
Hi. I am trying the same in [this jsFiddle](http://jsfiddle.net/GZV5V/84/) for `slideDown()` and `slideUp()`, but doesn't work well. Can you please tell me what am I missing here? Note: I am trying to do it without using `hoverIntent()` function. – Himanshu Nov 13 '13 at 05:24
2

From the doco: _As of jQuery 1.7, the `.live()` method is deprecated. Use `.on()` to attach event handlers._ – morloch Oct 22 '14 at 03:08

score 4 · Answer 2 · answered Dec 06 '12 at 19:05

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');
});

score 3 · Answer 3 · answered Jul 25 '10 at 12:33

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

answered Jul 25 '10 at 12:33

sTodorov

5,435
5
35
55

1

You need to store/clear that timeout as well, if you hover in and out fast, it'll complete that fadeOut() (if it runs at all) in 200ms, then 800ms later have a queued fadeIn, even though you're not over the element. Take a look here to see what I mean: http://jsfiddle.net/nick_craver/T9t6N/ To test, quickly hover and leave the link. – Nick Craver Jul 25 '10 at 12:39

score 0 · Answer 4 · answered Apr 13 '12 at 10:24

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 .

delay() or timeout with stop()?

4 Answers4

Linked