[英]JQuery Animate : Change the destination of a prop during the animation
I made a image scrolling with the mouse. 我用鼠标滚动图像。
The image scroll to a position based on the mouse position percentage of the window height. 图像根据窗口高度的鼠标位置百分比滚动到一个位置。
$(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);
});
So. 所以。 in that line
在那条线上
$(imageContainer).animate({scrollTop:scrollingTo},300,function(){hijacked=false;});
I want that scrollingTo change. 我想滚动改变。 Because during the animation, the user can move the mouse, changing the scrollingTo variable.
因为在动画期间,用户可以移动鼠标,更改scrollingTo变量。
Alright, I managed to cook together a hacky way of dynamically altering an animation. 好吧,我设法用一种动态改变动画的hacky方式做饭。 My understanding of the internal animation queue for jQuery is not great, but as far as I know there's no way to alter a queued animation, other than to make it stop.
我对jQuery的内部动画队列的理解并不是很好,但据我所知,除了让它停止之外,没有办法改变排队的动画。 Anyway, here's the key code for an example that alters position, which should be adaptable to scrolling (in 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();
}
});
});
There were a couple of tricks to make it work, I'll go through them and try to explain how I believe they could be adapted to scrolling: 有一些技巧可以使它工作,我将通过它们并尝试解释我如何相信它们可以适应滚动:
The main idea is that on mousemove, the prior event is cancelled, and a new one is started. 主要思想是在mousemove上,取消先前的事件,并启动一个新的事件。 I don't believe this will require any changes for scrolling.
我不相信这需要对滚动进行任何更改。
Some forms of animation accelerate/decelerate over the course of the animation - it's too hard to preserve this in a constantly changing animation (at least without writing a custom animation function), so the animation easing is set to "linear". 某些形式的动画在动画过程中加速/减速 - 在不断变化的动画中保存这些动画太难了(至少没有编写自定义动画功能),因此动画缓动设置为“线性”。
rapidly changing animations takes time (especially for an event as common as mousemove), so there's a limit on how often the animation can change. 快速变化的动画需要时间(特别是对于像mousemove这样常见的事件),因此对动画改变的频率有限制。 Before a change to the animation is made, it's ensured that no changes have been made in the last .05 seconds (this is done with "last_update").
在更改动画之前,确保在最后的.05秒内没有进行任何更改(这是通过“last_update”完成的)。
I believe if you just swap out the animation properties for your own (scrollTop), this should do what you're looking for. 我相信如果你只是换掉你自己的动画属性(scrollTop),这应该做你想要的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.