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

Answer 1

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