Stop multiple events firing on JQuery fadeTo

Question

So I want to stop multiple events firing if I hover over a div. This is my code.

$( "#menu" ).hover(
  function() {
    $("#menu").fadeTo("slow",0.8);
  },
  function() {      
    $("#menu").fadeTo("slow",0);
   }
);

I tried with stop() and stopPropagation() but didn't succeed, maybe I didn't use them properly.

I want only the first one to execute, and to discard all the events that user might trigger during fadeTo() animation. After the animation div should be "hoverable" again.

Answer 1

Use .stop() jQuery function with true, false arguments:

$( "#menu" ).hover(
  function() {
     $("#menu").stop(true, false).fadeTo("slow",0.8);
  },
  function() {        
     $("#menu").stop(true, false).fadeTo("slow",0);
  }
);

.stop( [clearQueue ] [, jumpToEnd ] )

Stop the currently-running animation on the matched elements. [read more]

So, it will clearQueqe but will NOT jump to the end.

JSFIDDLE

Answer 2

Have you tried stop() with true, true?

$("#menu").stop(true, true).fadeTo("slow",0.8);