jQueryで .slideDown() の完了を待ち、ｎ秒後に複数の処理を実行したい

Question

前提

jQueryを使用しています。以下const duration = 1000;です。

実現したいこと

以下のように【処理A】→【処理B】【処理C】と実行したいです。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
【処理A】$('.slide_elm').slideDown( duration );

　　↓　2000後に以下２つを実行

【処理B】$('.slide_elm').slideUp( duration );
【処理C】$('.animate_elm').animate( {width: 0}, duration );
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

つまり、【処理A】の完了を待ってから【処理B】【処理C】という２つを実行したいです。
さらに言い換えますと、slideUp しつつ、同時に width: 0; にしたいということになります。

発生している問題・エラーメッセージ

【処理A】の完了を待ってから、２つを実行する方法がわかりません。

該当のソースコード

まず以下のようにしましたところ
【処理A】→【処理B】【処理C】ではなく
【処理A】→【処理B】→【処理C】になってしまいました。（CはBの完了を待つ必要はありません。）

$('.slide_elm').slideDown(duration).css('display', 'flex').delay(2000).slideUp(duration).queue(function(){
	$('.animate_elm').animate( {width: 0}, duration );
});

続いてdelayにコールバックが使えるかと思って以下のようにしましたが実現できませんでした。

$('.slide_elm').slideDown(duration).css('display', 'flex').delay(2000,function(){
	$(this).slideUp(duration);                         //【処理B】
	$('.animate_elm').animate( {width: 0}, duration ); //【処理C】
});

またslideDownのコールバックを利用して以下のようにしましたがこれでも実現できませんでした。

$('.slide_elm').slideDown(duration,function(){
	$(this).slideUp(duration);                         //【処理B】
	$('.animate_elm').animate( {width: 0}, duration ); //【処理C】
}).css('display', 'flex').delay(2000);

どのようにすれば、【処理B】しつつ【処理C】と実現できるでしょうか？

Comments

[yambejp]

durationが2000ということですか？
何をトリガーに実行するのでしょうか？

Answer 1

.animate_elmの幅が適正ではないだけでは？

<style>
.animate_elm,.slide_elm{
  overflow:hidden;
  width: max-content;
}
.animate_elm{
  background-Color:lime;
}
.slide_elm{
  background-Color:aqua;
}
</style>
<script>
$(function(){
  var duration=1000;
  var wait=2000;
  $('.slide_elm').hide().slideDown(duration).delay(wait).queue(function(){
    $(this).slideUp(duration).dequeue();
    $('.animate_elm').animate( {width: 0},duration);
  }); 
});
</script>

<div class="slide_elm">slide1</div>
<div class="animate_elm">anime1</div>
<div class="slide_elm">slide2</div>
<div class="animate_elm">anime2</div>
<div class="slide_elm">slide3</div>
<div class="animate_elm">anime3</div>

Comments

[gorimaz]

.slideDown(duration).delay(wait).queue(function(){}); の順でしたか。言われてみればという感じでした。完璧なコードまでありがとうございます。