CODEWITHSUNDEEP
jqueryeventsfadeto
lucafik
lucafik

Reputation: 305

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.

Upvotes: 1

Views: 387

Answers (2)

Ionică Bizău
Ionică Bizău

Reputation: 113365

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

Upvotes: 2

Samuel Liew
Samuel Liew

Reputation: 79032

Have you tried stop() with true, true?

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

Upvotes: 0

Related Questions