Question: I am interested in a solution for jQuery `.animate` infinite loop break method.

```js
$(element).mouseover(function() {
   $(this).animate({ opacity: 1 }, duration, customFunc);
}).mouseout(function() {

});

```

And question now is how to break this loop? e.g within a `mouseout` event? 

I can do it easily with `setInterval` and `clearInterval` but is there a way to it with **`.animate`** function?

Answer: 
Use the .stop method:

<http://api.jquery.com/stop/>

I assume you want to immediately stop the currently running animation?

```
$(element).mouseover(function() {
   $(this).animate({ opacity: 1 }, duration, customFunc);
}).mouseout(function() {
   $(this).stop();
});

```
If what you are experiencing is an effect where the animation queues up as your mouse enters and leaves the element repeatedly and continues to repeat the animation over and over several times after your mouse has left the element and not returned - I would recommend the jquery hoverflow plugin for you. 

<http://www.2meter3.de/code/hoverFlow/>