CODEWITHSUNDEEP
javascriptjqueryjquery-events
Francis Goris
Francis Goris

Reputation: 85

How to stop a jQuery animation when it is executed

This is my sample code. Below I explain my problem:

<script type="text/javascript" src="jquery.min-1.10.1.js"></script>
<script type="text/javascript" src="jquery.animate-colors.js"></script>
<script type="text/javascript">
$(function () {
  $("a").mouseover(function (){
        $("a").animate({color: "#eee"});
   });

 $("a").mouseleave(function () {
        $('a').animate({color: '#000'});
  });
});
</script>
<a href="javascript:;">Hover Me</a>

Explanation:

When I hover over an item once this is executed consecutively every time you pass the mouse and I would like not to run again while doing an action. What I can recommend for this?

Upvotes: 0

Views: 135

Answers (3)

Boopathi.Indotnet
Boopathi.Indotnet

Reputation: 1390

please use some logical thing:

Declare a variable in $(document).ready function.

var i = 0;

var j = 0;

 $(function () {
    if(i==0){
      i=1;
      $("a").mouseover(function (){
        $("a").animate({color: "#eee"});
      });

     }
    if(j==0){
       j=1;
       $("a").mouseleave(function () {
        $('a').animate({color: '#000'});
     }); 
    }
 });
 }

 });

Upvotes: 3

epascarello
epascarello

Reputation: 207501

YOu are using the correct exit event of mouseleave, but you are not using the correct enter event. You should be using mouseenter which does not fire multiple times.

.mouseenter( handler(eventObject) )

Description: Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.

Also as Neal pointed out, you should also use stop in case the leave/open animation is firing when the user exits/enters the element.

Upvotes: 0

Naftali
Naftali

Reputation: 146302

First of all, chain your events and use on, next add .stop(stop, stop):

$(function () {
  $("a").on('mouseover', function (){
        $(this).stop(true, true).animate({color: "#eee"});
   }).on('mouseleave', function () {
        $(this).stop(true, true).animate({color: '#000'});
   });
});

Demo: http://jsfiddle.net/maniator/bktUt/

Upvotes: 5

Related Questions