文章/答案/技术大牛

发布

社区首页 >问答首页 >JQuery动画:在动画过程中更改道具的目标

问JQuery动画:在动画过程中更改道具的目标
EN

Stack Overflow用户

提问于 2012-09-14 02:30:45

回答 1查看 370关注 0票数 0

我用鼠标滚动了一张图片。

图像滚动到基于鼠标位置占窗口高度百分比的位置。

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

jquery

animation

mouseevent

javascript

回答 1

Stack Overflow用户

发布于 2012-09-14 03:22:31

好的，我设法用一种老套的方式来动态改变动画。我对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这样常见的事件)，因此更改动画的频率是有限制的。在对动画进行更改之前，请确保在最后几秒钟内未进行任何更改(这是通过"last_update").

完成的

我相信如果你只是把动画属性换成你自己的(scrollTop)，这应该能达到你想要的效果。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12412557

复制

相似问题

问JQuery动画:在动画过程中更改道具的目标
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery动画:在动画过程中更改道具的目标EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery动画:在动画过程中更改道具的目标
EN