Question

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

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

我想知道是否有任何理由让任何人都能想到为什么会发生这种情况？如果两个图像像第一个例子中的do那样一起移动就会很棒。

我怀疑它是有一个运行animate函数的setInterval（100），这意味着在第一个动画结束时会有10个动画（）运行。我不太确定是否有任何事情需要做，所以希望有人可以提供一些见解！谢谢大家！

（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

看起来你的动画可能堆叠在一起。由于您在比动画长度短的间隔内调用animate函数，因此所有动画都排队等候。由于间隔在每次运行时都会调用动画，因此有大量的1秒动画排队，因为它们都在移动到同一个地方，所以它们实际上并没有动画。

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

仅在动画到新位置时调用animate功能
在致电animate之前调用stop函数（docs），这将清除队列并立即启动新动画

我测试了在你的演示页面上添加了停止调用，它使得动画行为有点奇怪，但是它们最终使它成为它们应该的位置而不是停止部分方式而不是排列两个地图。我认为减少拨打animate的次数会解决这个问题。

调用2个元素的jquery animate（）仅适用于一个元素？

1 个答案: