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個元素只適用於一個？

回答

相關問題