アニメーション中の速度を変更する

Question

私は、非常に滑らかでゆっくりとスクロールする側を作成しようとしています。そのため、ページ上の何を読むのに十分な時間があります。しかし、私はjQueryを使ってアニメーションの速度を変更する方法を探しています。

2つのボタンがあります.1つはアニメーションスクロールをスピードアップし、もう1つはスローダウンします。あなたの誰かがこれを行う方法を持っていますか？

これは私のコードです：

$(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 
} 

うまくいけば、遷移が途切れ途切れではないでしょうが、あなたは遷移中に動かないのブリップを持っている場合でも、それはshouldnユーザーが速度を変更したことを知っているので、ユーザーを驚かせる。視覚的に迷惑だった場合は、一時的にボタンを強調表示してハイライトをすばやくフェードアウトすることで、トランジションからの注意をそらすこともできます。