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();
});

```
You could stop the animation using .stop()

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

You might want to use .stop(true, true) to clear the queue and jump to the end of the animation

You can use .data() to store a flag of if you should animate anymore

<http://api.jquery.com/jQuery.data/>

Add an IF in your customFunc before you invoke animate again to check the flag of whether or not you should animate. That way you won't refire due to any other callbacks. In your mouseover you should set the flag to be enabled again.