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: 
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.
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/>