Search code examples
jqueryeventsfadeto

Stop multiple events firing on JQuery fadeTo

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.

Solution

  • 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