JQuery Animate：在动画期间更改道具的目的地

Question

我用鼠标滚动图像。

图像根据窗口高度的鼠标位置百分比滚动到一个位置。

$(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变量。

Answer 1

好吧，我设法用一种动态改变动画的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），这应该做你想要的。