JQuery Animate：在動畫期間更改道具的目標位置

我使用鼠標滾動了圖像。JQuery Animate：在動畫期間更改道具的目標位置

圖像根據窗口高度的鼠標位置百分比滾動到某個位置。

$(imageContainer).mouseenter(function(e){ 
    var scrollingTo = ((e.pageY/$(this).height())-.083) * ($(imageContainer).prop('scrollHeight') - $(imageContainer).height()); 
    hijacked = true; 
    $(imageContainer).animate({scrollTop:scrollingTo},300,function(){hijacked=false;}); 
}).mousemove(function(e){ 
    if(hijacked) return; 
    var scrollingTo = ((e.pageY/$(this).height())-.083) * ($(imageContainer).prop('scrollHeight') - $(imageContainer).height()); 
    $(imageContainer).scrollTop(scrollingTo); 
});

所以，在那一行

$(imageContainer).animate({scrollTop:scrollingTo},300,function(){hijacked=false;});

我想那個滾動要改變。因爲在動畫期間，用戶可以移動鼠標，改變scrollingTo變量。

來源

2012-09-13 João Mosmann

如果我正確地理解了這個問題：您想根據鼠標在動畫過程中如何移動來動態更改動畫？ – Bubbles

是的，就是這樣。我想在動畫過程中更改目的地點 –

好的，我設法一起烹飪動態改變動畫的一種拙劣的方式。我對jQuery的內部動畫隊列的理解並不好，但據我所知，沒有辦法改變排隊的動畫，只能停下來。總之，這裏的一個例子的關鍵代碼，改變位置，這應該是適應滾動（在fiddle form）：

$(document).ready(function() { 
    var last_update = 0; 
    $(document).on("mousemove", function (e) { 
     if (Date.now() - last_update > 50) { 
      $mover = $("#mover"); 
      $mover.stop(); 
      $mover.animate({ left: e.pageX, top: e.pageY}, 200, "linear");    
      last_update = Date.now(); 
     } 
    });      
});

當時有幾個技巧，使其工作，我會去通過他們，並嘗試解釋我如何相信他們能夠適應滾動：

主要的想法是，在鼠標移動時，先前的事件被取消，一個新的開始。我不認爲這將需要滾動的任何更改。
某些動畫形式會在動畫過程中加速/減速 - 要在不斷變化的動畫中保留這些動畫是非常困難的（至少不需要編寫自定義動畫功能），因此動畫寬鬆設置爲「線性」。
快速變化的動畫需要時間（特別是對於像mousemove一樣常見的事件），所以動畫可以更改的頻率有限制。在更改動畫之前，確保在最後的0.05秒內沒有進行更改（這是通過「last_update」完成的）。

我相信如果你只是換出你自己的動畫屬性（scrollTop），這應該做你想要的。

來源

2012-09-13 19:22:31 Bubbles

我正在嘗試做類似的事情，並以類似的方式結束。只有我使用Interval而不是比較mousemove事件中的時間。你也不需要調用.stop（）如果你在我的答案中使用queue：false選項，它會提高性能。像這樣：$ mover.animate（{left：e.pageX，top：e.pageY}，{duration：200，easing：「linear」，queue：false}）; – Hoffmann

JQuery Animate：在動畫期間更改道具的目標位置

回答

相關問題