javascript - jQuery 动画 : Change the destination of a prop during the animation

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。因为在动画过程中，用户可以移动鼠标，从而更改scrollingTo 变量。

Answer 1

好吧，我设法一起 cooking 了一种动态改变动画的古怪方法。我对 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();
        }
    });                    
});

有一些技巧可以使其发挥作用，我将详细介绍它们并尝试解释我认为它们如何适应滚动:

• 主要思想是，在鼠标移动时，先前的事件被取消，并开始一个新的事件。我不认为这需要对滚动进行任何更改。

• 某些形式的动画会在动画过程中加速/减速 - 在不断变化的动画中很难保留这一点(至少在不编写自定义动画函数的情况下)，因此动画缓动设置为“线性”。

• 快速更改动画需要时间(特别是对于像鼠标移动这样常见的事件)，因此动画更改的频率是有限的。在对动画进行更改之前，请确保在最后 0.05 秒内没有进行任何更改(这是通过“last_update”完成的)。

我相信，如果您只是将动画属性替换为您自己的动画属性(scrollTop)，这应该可以满足您的要求。