Question

我即将创建一个侧面，它将滚动非常平滑并缓慢向下，这样您就有足够的时间阅读页面上的内容。但是，我正在寻找一种通过jQuery在动画期间改变速度的方法。

我想要的是2个按钮，一个用于加速动画滚动，另一个用于减速。你们有没有办法做到这一点？

这是我的代码：

$(document).ready(function() {

    $('a[href^="#"]').click(function(event) {

        var id = $(this).attr("href");

        var offset = 60;

        var target = $(id).offset().top - offset;

        $('html, body').animate({scrollTop:target}, 10000, 0, function(){
            //$('footer, header').unbind('click');
            //$('html, body').stop();
        });

        event.preventDefault();
    });
    $('#pause').click(function(e){
                $('html, body').stop();
                console.log("test");
        });

});

Answer 1

这应该很容易。单击该按钮时，只需stop()现有动画，然后通过对animate()方法进行新调用，使用不同的速度参数重新启动它。

例如，您可以使用这样的按钮侦听器（伪代码）：

$('speedUp').click(function(e){
    $('animatedElement').stop(); //don't clear or remove, just leave it where it stopped
    $('animatedElement').animate(properties [, duration] [, easing] [, complete] ); //faster settings
}
$('slowDown').click(function(e){
    $('animatedElement').stop(); //don't clear or remove, just leave it where it stopped
    $('animatedElement').animate(properties [, duration] [, easing] [, complete] ); //slower settings
}

希望转换不会变得不稳定，但即使你在转换过程中有一个没有动作的昙花一现，它也不应该让用户惊讶，因为他们知道他们只是改变了速度。如果它在视觉上很烦人，你甚至可以通过暂时突出显示按钮并快速淡出高光来转移注意力。

动画期间改变速度

1 个答案: