[英]JQuery Animate : Change the destination of a prop during the animation
我用鼠標滾動圖像。
圖像根據窗口高度的鼠標位置百分比滾動到一個位置。
$(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變量。
好吧,我設法用一種動態改變動畫的hacky方式做飯。 我對jQuery的內部動畫隊列的理解並不是很好,但據我所知,除了讓它停止之外,沒有辦法改變排隊的動畫。 無論如何,這里是一個改變位置的例子的關鍵代碼,它應該適合於滾動(以小提琴形式 ):
$(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上,取消先前的事件,並啟動一個新的事件。 我不相信這需要對滾動進行任何更改。
某些形式的動畫在動畫過程中加速/減速 - 在不斷變化的動畫中保存這些動畫太難了(至少沒有編寫自定義動畫功能),因此動畫緩動設置為“線性”。
快速變化的動畫需要時間(特別是對於像mousemove這樣常見的事件),因此對動畫改變的頻率有限制。 在更改動畫之前,確保在最后的.05秒內沒有進行任何更改(這是通過“last_update”完成的)。
我相信如果你只是換掉你自己的動畫屬性(scrollTop),這應該做你想要的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.