animate中の処理

Question

とあるシステムで、メニューの開閉を改修しています。
現在は、クリック連打対応としてフラグを用意し、
animate開始時にフラグON、animate完了時にフラグOFFにすることで
連打を回避しましたが、テストの際に上がってきた要望として
「アニメーション処理が80%進んだ時点でクリックを受け付ける」
ようにしてほしいということでした。
animateに秒数を指定し、setTimeOutでフラグOFFすることで
出来るかと思いテストしましたが、うまく動きません。
（クリックした時点でOFFになっていました）
どなたか解決方法よろしくお願いいたします。

Answer 1

オプションのstepを使うといいと思いますね。

<button>clickMe</button>
<div></div>
<span></span>

var flag=true;
$('button').on('click',e=>{
  if (flag) {
    $('div').stop().css({width:0});
    $('div').animate({width:100},{
      duration:5000,
      step: (now, fx)=>{
        $('span').text(now);
        if (now>80&&!flag) console.log(flag=true)
      }
    })
    flag = false;
  }
});

https://jsfiddle.net/5hd24and/

Comments

[Lhankor_Mhy]

あら、現行のコード見てませんでした。失礼。

[T.I]

上記コードとサンプルの動作を基に改修して使用させていただきました。
回答ありがとうございました。

Answer 2

具体的なanimate処理のトリガーと実行を例示してください
またスピードはミリ秒単位で指示してください

#追記
以下、一定時間waitをかけるサンプルを提示します。
わかりやすいようにトリガーになるdivに色をつけてあります。
赤いボタンを押すと水色に変わり水色の間はボタンを押せません。
一定時間立つと水色から赤に戻ります。
speed（ミリ秒）とratio(経過した比率)でスピードは調整してください

<style type="text/css">
#button {
	float: left;
	background-color: red;
	height: 50px;
	width: 50px;
}
#ani {
	float: left;
	background-color: silver;
	height: 50px;
	width: 500px;
}
</style>
<script src="js/jquery.js"></script> <!--ライブラリは適当に-->
<script>
$(function(){
  var speed=1000;
  var ratio=0.8;
  var flg=true;
  $('#button').on('click',function(){
    if(flg==false) return false;
    $.when(
      setTimeout(function(){
        $('#ani').animate( { width: 'toggle',}, { duration: speed, easing: 'swing', } );
        $('#button').css({"background-Color":"aqua"});
        flg=false;
      },0),
      wait(speed*ratio))
      .done(
        function(){
          flg=true;
          $('#button').css({"background-Color":"red"})
          }
        )
      });
});
function wait(speed) {
    var d = $.Deferred();
    setTimeout(function(){d.resolve();}, speed);
    return d.promise();
}
</script>
<div id="button"></div>
<div id="ani" style="display: block;"></div>
<div style="clear: both;"></div>

ただしanimateが終わる前にwait処理が終わるので
徐々にボタンが押せるタイミングが速くなってきます
仕様は悩みどころですね・・・

Comments

[T.I]

現行の、クリック連打対応した処理が以下になります。

var gMenuFlg = 0;
var gMenu = function(){
WindowHeight = $(window).height();
$('#gMenuWrapper').css('height', WindowHeight - '10');
$(function(){
$('#gMenu').on('click', function(){
if (!gMenuFlg){
gMenuFlg = 1;
$('#gMenuWrapper').animate({width:'toggle'}, {complete:function(){gMenuFlg = 0;}});
$(this).toggleClass('gMenuOpen').toggleClass('gMenuClose');
}
});
});
};

開閉スピードは1000ミリ秒にする予定です。

[yambejp]

一応サンプルをつけておきます
ただし仕様が微妙ですね・・・

[T.I]

今回は、Lhankor_Mhyさんの案を使用させていただきました。
yambejpさんに投稿いただいたサンプルも、動作させてみて
今後使用させていただくことがあるかと思います。
投稿ありがとうございました。