jquery 对 2 个元素调用的 animate() 仅对一个元素有效？

Question

只是想知道是否有人知道为什么会发生这种情况。我的网站上有一张地图，当您将鼠标移动到其所在容器的边界时，它会滚动。当您将鼠标悬停在它上面时，它还会突出显示一个特定的城市，这是通过创建一个与原始尺寸相同的地图叠加层来实现的地图。因此，我只是应用相同的左侧和顶部 CSS 来让两个图像一致移动。此处示例：http://www.bestattorney.com/locations/

我的问题是，当您将鼠标悬停在地图下方的链接上时，您悬停的区域应该位于屏幕中央。它有效，但我想添加一点动画，这样移动就不会那么刺耳。当我将 animate({}) 从 0 更改为 1000 时，结果是只有叠加图像移动，如下所示：http://www.bestattorney.com/locations/locations2.html

我想知道是否有任何人可以想到为什么会发生这种情况？如果两个图像都像第一个示例中的那样一起移动，那就太好了。

我怀疑是有一个运行 animate 函数的 setInterval(100)，这意味着到第一个动画结束时会有 10 个 animates() 运行。我不太确定是否有什么可以做的，所以希望有人能提供一些见解！谢谢大家！

（Mjfisheruk 的滚动插件：https://github.com/mjfisheruk/jquery.pan）简化代码以供参考，或者您可以直接查看源代码。如果我能回答任何问题，请告诉我，谢谢。

var interval; //creates the setInterval object

$("#container").pan({
  //Initialize scrolling by placing mouse cursor at the edge of map. 
});

var pan = function(areaX,areaY){
   var onInterval = function() {
        //If the mouse is on the edge of the map
        //check which way the mouse is moving
        //set varX and varY to the location they  should be at
     
         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 the coordinates of the hovered area and enter those values in areaX and areaY
      clearInterval(interval)
      $("#container").pan({
          //Initialize scrolling, but this time use hovered area to decide where to 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>

Answer 1

看起来您的动画可能会堆叠在一起。由于您在比动画长度短的时间间隔内调用动画函数，因此所有动画都会排队。由于 interval 每次运行时都会调用 animate，所以有很多 1 秒的动画排队，但实际上并没有激活任何东西，因为它们都移动到同一个地方。

我认为如果您执行以下操作应该能够解决您的问题：

仅在动画到新位置时调用 animate 函数
在调用 animate 之前调用 stop 函数 (docs)，这将清除队列并使您的新动画立即开始

我测试了在你的演示页面上添加停止调用，这让动画表现得有点奇怪，但它们最终到达了它们应该出现的位置，而不是中途停止而不是排列两张地图.我认为减少调用 animate 的次数会解决问题。

jquery 对 2 个元素调用的 animate() 仅对一个元素有效？

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

html

jquery

jquery-animate