The path is very complex (a map of north america) and i want to animate it's opacity on rollover. It works as expected but the only problem is that if you rollover, for example, 2 islands before getting to the main area of the map, it will cycle the whole opacity animation 2 times before getting to the state that you want it to (same problem on mouse out). Is there a way of stopping the animation from running if it is already in progess?

3. $(".svgcontainerclass path").mouseenter(function(){ 
4.       $(this).animate({
5.             opacity: '1'
6.       }, 300);
7. });
8. 
   
9. $(".svgcontainerclass path").mouseleave(function(){ 
10. $(this).animate({
11.       opacity: '0'
12. }, 200);
13. });

Thanks in advance