html - jquery animate() called on 2 elements only works on one? -

just wondering if had insight why might happening. have map on website scrolls when move mouse borders of container in. highlights specific city when hover on it, accomplished creating map overlay same dimensions original map. therefore apply same left , top css 2 images move in unison. example here: http://www.bestattorney.com/locations/

my problem when hover on links below map, area you're hovering on supposed come center of screen. works add little bit of animation move isn't jarring. when change animate({}) 0 1000, result overlay image moves, so: http://www.bestattorney.com/locations/locations2.html

i wondering if there reason think of off top of heads why happens? great if both images moved in first example.

what suspect there's setinterval(100) runs animate function, mean there 10 animates() running time first animation finishes. i'm not quite sure if there's done provide insight! all!

(scrolling plugin mjfisheruk: https://github.com/mjfisheruk/jquery.pan) simplified code reference or can in source. please let me know if can answer questions, thanks.

var interval; //creates setinterval object    $("#container").pan({    //initialize scrolling placing mouse cursor @ edge of map.   });    var pan = function(areax,areay){     var oninterval = function() {          //if mouse on edge of map          //check way mouse moving          //set varx , vary location  should @                  if (areax != "" & areay != "") {               varx = areax;               vary = areay;             }                   $("#container img").animate({                  left: varx + "px",                  top: vary + "px"           }, 0);     }     interval = setinterval(oninterval,100);  }    $("li").mouseenter(function() {        //find out coordinates of hovered area , enter values in areax , areay        clearinterval(interval)        $("#container").pan({            //initialize scrolling, time use hovered area decide scroll to.          },areax, areay);  });

<div id="container">    <map>      <area>      <area>      <area>    </map>    <img id="map-overlay">    <img id="background-map">      </div>        <ul>    <li>location1</li>    <li>location2</li>    <li>location3</li>  </ul>

it looks animations may stacking on top of each other. since calling animate function inside interval shorter length of animation, of animations queued up. since interval calls animate every time runs, there lot of 1 second animations queued don't animate because moving same place.

i think should able solve issue if following:

• only call animate function when animating new location
• before call animate call stop function (docs), clear queue , make new animation start immediately

i tested adding stop call on demo page , made animations act little weird, made supposed opposed stopping part way , not lining 2 maps. think reducing number of times call animate fix weirdness.