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

只是想知道如果有人有任何洞察，为什么这可能会发生。我在我的网站上有一张地图，当你将鼠标移动到它所在的容器的边界时，它会滚动。当你将鼠标悬停在它的上方时，它也会突出显示一个特定的城市，这是通过创建一个具有与原始地图。因此，我只是应用相同的左和顶CSS来使两个图像一致移动。示例在这里：http://www.bestattorney.com/locations/jquery animate（）调用2个元素只适用于一个？

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

我想知道是否有任何理由认为任何人都可以从其顶部为什么会发生这种情况？如果两个图像像第一个例子中的do一样移动，那将会很棒。

我怀疑是有一个setInterval（100）运行animate函数，这意味着在第一个动画完成时会有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>

来源

2015-06-19 mcheah

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

我想你应该可以，如果你做了以下解决您的问题：

你叫animate调用stop功能之前只有调用animate功能，当您动画到新的位置
（docs），这将清除队列，并使您的新动画立即开始

我测试了在您的演示页面上添加停止调用，并使得ani虽然有些奇怪，但它们最终将它们应用到了它们应该达到的地方，而不是停下来，而不是排列这两幅地图。我认为减少你拨打animate的次数可以解决这个问题。

来源

2015-06-20 02:15:01 rdubya

感谢您的帮助！如果我将鼠标悬停在导航链接上，并重置它，如果我将鼠标悬停在地图上，我最终将清除间隔。当我更愿意使用stop（true，false）时，我不得不在动画上调用stop（true，true），以便它不会跳到动画的结尾，但由于某些原因，仍然会给我带来同样的问题我以前有过。我很满意，但离开它。再次感谢！ – mcheah

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

回答

相关问题