Setting rollover state of SVG path

Setting rollover state of SVG path

Sorry in advance for the newbie question, I am having a couple of issues setting the mouse over and mouse out states of an SVG path. 

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?

  1. $(".svgcontainerclass path").mouseenter(function(){ 
  2.       $(this).animate({
  3.             opacity: '1'
  4.       }, 300);
  5. });

  6. $(".svgcontainerclass path").mouseleave(function(){ 
  7. $(this).animate({
  8.       opacity: '0'
  9. }, 200);
  10. });
This is an example of the path...

Thanks in advance