Question about animate behaviour

Question about animate behaviour

Hello, I'm new to jquery and have been looking at using the "animate" feature to move elements around the page as opposed to CSS transitions (which I'm currently using) because jquery offers better cross browser compatibility.

I have things working fairly nicely, but I've noticed that if an element is asked to animate to a position while it's already in the middle of an animation it needs to finish its current animation before it's able to start moving again to reach its new target - with CSS transitions an element can be interrupted mid-animation and blend from where it is to its new destination.

Example code I'm using is as follows:

 $("#photo1").hover(function(){ 
      $(".arrow").animate({left:"20px"},300);
      });
 $("#photo2").hover(function(){
      $(".arrow").animate({left:"100px"},300);
      });

If the user hovers over #photo1 triggering the first animation and then quickly (while the animation is still running) hovers over #photo2 - the "arrow" class must still complete it's first animation (complete with deceleration and acceleration effects) before it can start the new animate request - is there anyway I can get the animation to behave more quickly and fluidly like in CSS transitions?