ベロシティアニメーション自体を繰り返すのを止める方法

Question

ベロシティを使ってウェブサイトのスクロールボタンをアニメートしています。ウィンドウがスクロールされると、ボタンは変化する位置をアニメートし、再び上に到達すると、元の位置に戻ります。コードは次のとおりです。

$(document).ready(function() { 
    var mustSlideRight = true; 
    var mustSlideLeft = false; 
    $(window).scroll(function() { 

     var scrolledHeight = ($(window).scrollTop()); 

     if (scrolledHeight > 2 && mustSlideRight) { 

      $(".scrollButton") 
       .velocity({width: "55px", height: "55px"}, {duration: 200, easing: "ease-in-out"}) 
       .velocity({width: "0px", height: "0px", opacity: "0"}, {duration: 80, easing: "ease-in-out"}) 
       .velocity({left: "95%", backgroundPosition: "-50px"}, {duration: 1}) 
       .velocity({width: "55px", height: "55px", opacity: "1"}, {duration: 80, easing: "ease-in-out"}) 
       .velocity({width: "50px", height: "50px"}, {duration: 150, easing: "ease-in-out"}); 
      mustSlideRight = false; 
      mustSlideLeft = true; 
     } 
     else if (scrolledHeight < 10 && mustSlideLeft) { 

      $(".scrollButton") 
       .velocity({width: "55px", height: "55px"}, {duration: 200, easing: "ease-in-out"}) 
       .velocity({width: "0px", height: "0px", opacity: "0"}, {duration: 80, easing: "ease-in-out"}) 
       .velocity({left: "49%", backgroundPosition: "0px"}, {duration: 1}) 
       .velocity({width: "55px", height: "55px", opacity: "1"}, {duration: 80, easing: "ease-in-out"}) 
       .velocity({width: "50px", height: "50px"}, {duration: 150, easing: "ease-in-out"}); 
      mustSlideLeft = false; 
      mustSlideRight = true; 
     } 
    }); 

ボタンの背景イメージはスプライトです。

問題はアニメーションが何度も前後に動くことです。それを下って行くことは3回実行し、それを戻すことは5〜6回実行します。私は、コードを書く方法に問題があると思っていますが、そのロジックには問題はありますが、それを理解することはできません。何か案は？

編集：

@mattmokary：私はこれが道であるという感覚を持っているにもかかわらず、私はあなたが提案した何をしたが、物事は悪化しました。しかし、私はほとんど私のコードに誤りがあると確信しています。アニメーションはまったく開始しません。

var mustSlideRight = true; 
    var mustSlideLeft = false; 
    var animating = false; 
    $(window).scroll(function() { 

     if (animating){ 
      return; 
     }else if (!animating){ 
      animating = true; 
      var scrolledHeight = ($(window).scrollTop()); 

      if (scrolledHeight > 2 && mustSlideRight) { 

       $(".scrollButton") 
        .velocity({width: "55px", height: "55px"}, {duration: 200, easing: "ease-in-out"}) 
        .velocity({width: "0px", height: "0px", opacity: "0"}, {duration: 80, easing: "ease-in-out"}) 
        .velocity({left: "95%", backgroundPosition: "-50px"}, {duration: 1}) 
        .velocity({width: "55px", height: "55px", opacity: "1"}, {duration: 80, easing: "ease-in-out"}) 
        .velocity({width: "50px", height: "50px"}, {duration: 150, complete: function(){animating = false;}, easing: "ease-in-out"}); 
       mustSlideRight = false; 
       mustSlideLeft = true; 
      } 
      else if (scrolledHeight < 10 && mustSlideLeft) { 

       $(".scrollButton") 
        .velocity({width: "55px", height: "55px"}, {duration: 200, easing: "ease-in-out"}) 
        .velocity({width: "0px", height: "0px", opacity: "0"}, {duration: 80, easing: "ease-in-out"}) 
        .velocity({left: "49%", backgroundPosition: "0px"}, {duration: 1}) 
        .velocity({width: "55px", height: "55px", opacity: "1"}, {duration: 80, easing: "ease-in-out"}) 
        .velocity({width: "50px", height: "50px"}, {duration: 150, complete: function(){animating = false;}, easing: "ease-in-out"}); 
       mustSlideLeft = false; 
       mustSlideRight = true; 
      } 
     } 
    }); 

Answer 1

それは私が思ったよりずっと簡単でした。私はちょうど非常に特定のポイントにアニメーションをトリガするためにifステートメントのパラメータを変更し、アニメーションは繰り返されません）

Answer 2

ページを下にスクロールすると、多くのscrollイベントが発生します。この関数は、イベントごとに1回呼び出され、アニメーションはキューに入れられます。

修正するには、既にアニメーションが実行中であることを示すフラグを追加し、そのフラグがtrueの間にアニメーションを実行しないようにします。また、あなたはアニメーションを実行する際に行うanimating = trueを設定し、animating = falseを設定し、アニメーションが完了した後に実行する速度にコールバックを渡す必要があります

var animating = false; 

$(window).scroll(function() { 
    if (animating) { 
     return; 
    } 

    // ... 
}); 

：ような何か。