jQuery の animate で、実行直後の function が効かない

Question

前提・実現したいこと

疑似的なプログレスバーを実装しています。

1. AJAX通信開始時にバーを80％まで伸ばして
2. AJAXのレスポンスがあればバーを100%に伸ばして
3. opacity:0; にして消す

というだけのバーです。

発生している問題

上記2と3が同時に実行されてしまいます。該当のソースコードにおける、animate の引数として渡した function が、実行直後に処理されないという状況かと思います。

該当のソースコード

<div class="bar"></div>

.bar {
    height: 0.5rem;
    background: red;
    width: 0;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    transition: 2s;
}

var start = function(){
	// 1. AJAX通信開始時にバーを80％まで伸ばして
	$('.bar').css({width:0,opacity:1});
	$('.bar').stop().animate( {width:'80%'}, 1000 );
}
var end = function(){
	// 2. AJAXのレスポンスがあればバーを100%に伸ばして
	$('.bar').stop().animate( {width:'100%'}, 10, function(){
		// 3. opacity:0; にして消す
		$(this).css({opacity:0});
	});
}

試したこと

他の記述を試してみたり、

		// 3. opacity:0; にして消す
		$(this).css('opacity',0);

クラス付与にしてみたり試しても変わらず、やはり2と3が同時に実行されてしまいます。

		// 3. opacity:0; にして消す
		$(this).addClass('is_opacity0');

Answer 1

アニメーション時間が10ミリ秒しかないのでは、仮に表示できたところで肉眼で認識するのも無理でしょうし、ゲーミング用でない60Hzのディスプレイでは1コマが1/60秒≒16.7ミリ秒もあるので、それより短いアニメーションは表示すらされないこともありえます。

Comments

[maisumakun]

jquery.fx.offでアニメーションを止めていたりはしませんか？

[maisumakun]

（回答側に転載したので削除）

[nikuatsu]

jquery.fx.off は知りませんでしたのでやっていません。

ディスプレイの原因なんてよくご存じですね。しかし10ミリ秒を1秒にしてゆっくり確認しましたが、やはり同時で、100%に伸びつつ同時にopacityが0に近づきました。

[maisumakun]

.barに「transition: 2s」とあるので、JavaScriptで書き換えた値はすべて2秒かけて変化することになります。

[nikuatsu]

CSSの transition: 2s; を消したら、きちんと 100% 伸びてから、opacity が 0 になりました！

でもなぜでしょう…？

[maisumakun]

jQueryのアニメーションは、「要素にCSSの値を書き込む」ことで行っているのですが、transition: 2sがあると、すべてが「jQueryの書き込んだ値が、さらに2秒かけてアニメーションする」という状態となってしまうのです。

なので、「jQueryでアニメーションが終わったタイミング」で何かを実行しても、実際には「CSSのアニメーションが終わる2秒前」ということになり、順序などはめちゃくちゃになります。

[nikuatsu]

ありがとうございました。勉強になりました。