CODEWITHSUNDEEP
javascriptjquerycss
Tech Tech
Tech Tech

Reputation: 354

How to prevent JavaScript from applying the mouseover event several times

I noticed a problem when I was testing the mouseover event. In the example bellow, there is an image, when you hover it, it gets larger, when mouse is out, it gets back to the normal size, but when you pass the mouse over it many times fast, it keeps getting bigger and smaller several times, like if it had memorized every single pass of the mouse on it and kept playing the animation over and over.

Here is a live example: Here Keep moving the mouse over and out the image fast then take the mouse away and you will see.

Upvotes: 0

Views: 169

Answers (3)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Allow me to introduce you to CSS3, the thing that makes jQuery obsolete: Demo

HTML:

<img src="......./Smiley.png" alt="smile" id="imgSmile" />

CSS:

#imgSmile {
    width:200px;
    transition:width 0.4s ease;
}
#imgSmile:hover {
    width:250px;
}

JS: NONE!

Upvotes: 2

trrrrrrm
trrrrrrm

Reputation: 11802

You can add a class while you animate and remove it once the animation is done, and only apply new animation if the class is not applied to the element. Example:

 $(document).ready(function(){
       $('#imgSmile').width(200);
       $('#imgSmile').mouseover(function()
       {
           if(!$(this).hasClass('animating')){
              $(this).css("cursor","pointer");
              $(this).addClass('animating');
               $(this).animate({width: "250px"}, 'slow',function(){
                    $(this).removeClass('animating');
               });
           }
       });

    $('#imgSmile').mouseout(function()
      {   
          $(this).animate({width: "200px"}, 'slow');
       });
   });

Demo: http://jsfiddle.net/bR5cm/3/

Upvotes: 0

Artyom Neustroev
Artyom Neustroev

Reputation: 8715

Use .stop():

$(this).stop().animate({width: "200px"}, 'fast');

http://jsfiddle.net/bR5cm/2/

Upvotes: 2

Related Questions