jQuery: Having .delay() with .stop() makes .stop() useless. why?

Question

I'm doing something like this http://jsfiddle.net/8ErSL/2/

When you hover any text box (div) a little icon will appear inside it.

I wanted to stop the fade effect of the icon from repeating itself as many times as I accidently hover the div, you know it's kinda annoying. I know there was a way to prevent this by adding .stop() and It worked like a charm.

but when I tried to delay the appearance of the icon by adding .delay(500) the .stop() has become useless and the fade effects keep repeating as you keep moving the cursor among the divs.

How can I override this problem? I need to both delay and prevent the repeated fade effect.

Thanks

Yeah, I had to add a `background-color` to the `.icon` element: http://jsfiddle.net/davidThomas/8ErSL/1/ — David Thomas, Jul 09 '12 at 11:32
@Utkanos I've updated my fiddle with a background-color to the icon as David suggested — user1511773, Jul 09 '12 at 11:36

score 0 · Answer 1 · edited May 23 '17 at 10:34

Please read this: http://forum.jquery.com/topic/stop-does-not-clear-delay

http://bugs.jquery.com/ticket/6255

this might help: delay() or timeout with stop()?

As I understand it stop() cannot clear a delay. This is from the documentation on delay;

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Also in-case I completely misunderstood your question then Please lemme know :) will remove this post. Hope this helps

raina77ow · Accepted Answer · 2012-07-09T12:23:49.567

0

I suppose you may try something like this.

var $prev;   
$(".codebox").hover( function() {
   var $icon = $(".icon", this);
   if ($prev) {
      $prev.stop(true)
           .delay(500).fadeOut('fast'); // so animation will be shown here as well
   }        
   $icon.delay(500).fadeIn("fast");
   $prev = $icon;
}, function() {
   $(".icon", this).delay(500).fadeOut("fast");
} );

Demo.

The point is that we force the hiding of the block's icon, when mouse enters another block. We cannot do it on 'leave' (as it will mess up our animation when mouse just leaves one area, and not goes to another), but we can do it on the next 'enter' event, if we store the 'previous' icon in some sort of cache.

UPDATE There's another, much more simple way:

$(document).ready( function () {
    $(".codebox").hover( function() {
       $(".icon", this).delay(500).fadeIn("fast");
    }, function() {
       $(".icon", this).stop(true).delay(500).fadeOut("fast");
    } );
});

... if you won't mind that block won't be highlighted at all when mouse just passes through it. )

edited Jul 09 '12 at 12:23

answered Jul 09 '12 at 11:40

raina77ow

103,633
15
192
229

No, I need the hover effect to appear every time I hover the div. fades in when the mouse enters, fades out when the when the mouse leaves – user1511773 Jul 09 '12 at 11:43
Sorry, have misunderstood your question. Updated the answer with (hopefully) something more interesting. ) – raina77ow Jul 09 '12 at 12:04
Thanks! I've done something exactly like your second way but with using .animate() instead. yours also works anyway. – user1511773 Jul 09 '12 at 13:17
You're welcome. +1 for your question, by the way; I had to actually think about it, and not just google out a documentation page. ) – raina77ow Jul 09 '12 at 13:20

jQuery: Having .delay() with .stop() makes .stop() useless. why?

2 Answers2