【jquery】fadeOutの後に処理したい

Question

###実現したいこと
２つあります。

➀クリックして要素のfadeOutが完了した後に、bodyの色を変化させる。
➁それが終わったら要素をfadeInする。

このうち、➀はできましたが➁ができない状態です。

サンプルあります????https://jsfiddle.net/z7nae31g/

###発生している問題
下記jqueryの➁で、fadeInしてくれないのが問題です。

<p>クリックしたら要素がfadeOutし、bodyの色が変わる。しかしその後fadeInしない。</p>

<section>

  <div>
    <button type="button" data-number="1">クリック1</button>
    <div class="target1">target1</div>
  </div>

  <div>
    <button type="button" data-number="2">クリック2</button>
    <div class="target2">target2</div>
  </div>

</section>

$(document).on('click','button', function(){

	const number = $(this).attr('data-number');

	$.Deferred().resolve()

	.then(function(){
		
		let element,color;
		if( number=='1' ) { element=$('.target1'); color='lightgreen' }
		if( number=='2' ) { element=$('.target2'); color='dodgerblue' }
		
		// ➀クリックして要素のfadeOutが完了した後に、bodyの色を変化させる。
		element.fadeOut().queue(function() {
			$('body').css('background',color); 
 		});
    
	})

	.then(function() { 
		
		// ➁それが終わったら要素をfadeInする。
		$('.target1').fadeIn();
		$('.target2').fadeIn();

	});		

});

どうしたらfadeInさせることができますでしょうか？

###補足
ちなみになんですが、 $.Deferred() は意図して使っているので、その構造は変えずにできればと思っています。

Answer 1

こういうことでしょうか。

$(document).on('click', 'button', function() {
	const number = $(this).attr('data-number');
	let element, color;
	if (number == '1') {
		element = $('.target1');
		color = 'lightgreen'
	}
	if (number == '2') {
		element = $('.target2');
		color = 'dodgerblue'
	}
	// ➀クリックして要素のfadeOutが完了した後に、bodyの色を変化させる。
	element.fadeOut( 400, function() {
		$('body').css('background', color);
		// ➁それが終わったら要素をfadeInする。
		$('.target1').fadeIn();
		$('.target2').fadeIn();
	});
});

【.fadeOut() | jQuery API Documentation】
https://api.jquery.com/fadeOut/#fadeOut-duration-easing-complete

Comments

[marimon]

ありがとうございます。さすがに $.Deferred() は意図して使っているので、その構造は変えずにできればと思ってまして…
つまり、フェードインとアウトはそれぞれ別の then(function(){} で処理したいのです。

[kei344]

特に意味の無い記述に見えたので、それが必須条件だとは思えませんでした。「jQuery Deferred を使って処理したい」なのですね。
処理が終わったところでresolveするように書き直せば出来るとは思います。

[marimon]

いえ別に攻めてるわけじゃないので、大丈夫ですよ。resolveの位置についてアドバイスありがとうございます。

Answer 2

        let d = $.Deferred();

        // ➀クリックして要素のfadeOutが完了した後に、bodyの色を変化させる。
        element.fadeOut().queue(function() {
            $('body').css('background',color);
            $(this).dequeue();
            d.resolve();
        });
        return d.promise();

しかし、この場合は明示的にDeferred()を呼ぶ必要はなく、次のように書けます。

    element.fadeOut().promise().done(function() {
        $('body').css('background', color);
        $(this).fadeIn();
    });

https://api.jquery.com/promise/#example-1

Comments

[marimon]

ありがとうございます。参考にさせて頂きます。