jqueryの幅の切り替えアニメーションを途中で停止して再び閉じるようにするにはどうすればよいですか?

Question

この質問はわかりにくいかもしれませんが、例を挙げてみましょう。幅を切り替えるボタンをクリックすると、ボタンを押した後も div がアニメーション化し続けますが、これは驚くべきものではありません。私が望むのは、div が途中で停止して別の方向に進み、ボタンがもう一度押されたときに既存のアニメーションを完了しないことです。

$(ドキュメント).ready(function() {
  $('.menuToggle').click(function() {
    $(".menuContainer").animate({
      幅: 'トグル'
    });
  });
});

.menuContainer {
  高さ: 100ピクセル;
  幅: 50ピクセル;
  フロート: 左;
  位置: 相対的;
  背景色: 黒;
  表示: なし。
}

<スクリプト src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuContainer">
  <!-- メニュー項目 -->
</div>
<h4 class="menuToggle">メニューを表示</h4>

ここにヴァイオリンがあるので、私の言っていることが理解できるでしょう。 「メニューを表示」ボタンをスパム送信してみてください。

https://jsfiddle.net/x14usdga/5/

ご協力ありがとうございます。あちこち探しましたが、私の問題に関する情報が見つからないようです。

Answer 1

アニメーションを実行する前に、要素がアニメーション化されていないかどうかを確認できます

https://api.jquery.com/is/
https://api.jquery.com/animated-selector/

$(ドキュメント).ready(function(){
  $('.menuToggle').click(function(){
    if( $('.menuContainer').is(':animated') ) { return false; }
    $(".menuContainer").animate({width: 'toggle'});
  });
});

.menuContainer{
    高さ: 100vh;
    幅: 15vw;
    フロート: 左;
    位置: 相対的;
    背景色: 黒;
    表示: なし。
}

    
    
    
メニューを表示

Answer 2

.stop() メソッドを使用できます。これを試して＃＃＃

$(ドキュメント).ready(function() { $('.menuToggle').click(function() { $(".menuContainer").stop().animate({ 幅: 'トグル' }); }); });

.menuContainer { 高さ: 100ピクセル; 幅: 50ピクセル; フロート: 左; 位置: 相対的; 背景色: 黒; 表示: なし。 }

  


メニューを表示