jQueryで「全体を非表示」→「指定箇所を表示」を順に処理したい

Question

###実現したいこと
下記HTMLについて、➀～➅の順で処理したいです。

➀<button>クリック
➁.outerをfadeOut()
➂<p>cat</p>と<p>dog</p>を『１つ』ずつ挿入
➃<button>のデータ属性に応じた箇所をfadeIn()
➄<p>ape</p>を『１つ』挿入

ざっくりいいますと
★<p>cat</p>と<p>dog</p>は非表示中に見えないように挿入したい!!
★<p>ape</p>は表示後に挿入したい!!
ということですが、上に『１つ』を強調してあるように、これが『複数』になってしまう問題が発生しました。

###発生している問題
下記jQueryで<button>をクリックすると、<p>cat</p>と<p>dog</p>が『６つ』ずつ挿入され、<p>ape</p>は『２つ』挿入されてしまいます。全部『１つ』でいいのに！

###該当のソースコード
下記HTMLとjQueryのサンプルをどうぞ。
https://jsfiddle.net/96bqn8hf/

まずHTMLです。表示切替の流れを作るため、<button>のデータ属性にouterTypeとinnertTypeを持たせ、それぞれ表示を切り替えるべき.outerと.innerに対応させました。

<div class="wrapeer">

  <div class="outer" data-outerType="1">
    <div class="inner" data-innerType="A">innerA</div>
    <div class="inner" data-innerType="B">innerB</div>  
  </div>

  <div class="outer" data-outerType="2">
    <div class="inner" data-innerType="C">innerC</div>
    <div class="inner" data-innerType="D">innerD</div>  
  </div>

  <button type="button" data-innerType="A" data-outerType="1">A</button>
  <button type="button" data-innerType="B" data-outerType="1">B</button>
  <button type="button" data-innerType="C" data-outerType="2">C</button>
  <button type="button" data-innerType="D" data-outerType="2">D</button>

</div>

次にjQueryですが、➀～➅の流れのために

☆fadeOut()の中にcat();とdog();を書いた。
☆fadeIn()の中にape();を書いた。

ということをやってみました。タイミングはいいかんじ。

ですが、こうすると挿入が『複数』になるわけです。

$('button').click(function(){
	const outerType = $(this).attr('data-outerType');
	const innerType = $(this).attr('data-innerType');
	$('.outer, .inner').fadeOut(200, function() {
		cat(); dog(); 
	});	
	$('.outer[data-outerType="'+outerType+'"], .inner[data-innerType="'+innerType+'"]').delay(200).fadeIn(200, function() {
		ape();
	});	
});

function cat(){
	$('.outer').append('<p>cat</p>');
}
function dog(){
	$('.outer').append('<p>dog</p>');
}
function ape(){
	$('.outer').append('<p>ape</p>');
}

###試したこと
上だと『複数』の挿入になり、なぜかといろいろ試していましたところ、どうやら.outerと.innerの数に応じて挿入されてしまうことがわかりました。

これは困ります。

★<p>cat</p>と<p>dog</p>は非表示中に見えないように挿入したい!!
★<p>ape</p>は表示後に挿入したい!!
という目的のために、

☆fadeOut()の中にcat();とdog();を書いた。
☆fadeIn()の中にape();を書いた。

をしていて、つまりfadeout()後に挿入が実行され、同様にfadeIn()の後に実行されるようにしているわけですが、こいつらせいで対象の.outerと.innerの数だけ挿入が実行されてしまうみたいなんです。

だもんで☆の関数を「中に」でなく「外に」とすれば、『複数』は『１つ』にできるって話なんですが、でもそれだと、そもそもの目的である★が実現できません。

鬼のように厄介ですが、これって解決できますか？？

Answer 1

こういうことですか？

$(function(){
  $('button').click(function(){
    var innerType=$(this).data('innertype');
    var target=$('.inner').filter(function(){return $(this).data('innertype')==innerType;});
    $('.outer').fadeOut().queue(function(){
      if($(this).find(target).length>0){
        cat(target);
        dog(target);
      }
      $(this).dequeue();
    }).fadeIn().queue(function(){
      if($(this).find(target).length>0){
        ape(target);
      }
      $(this).dequeue();
    });
  });
});
function cat(target){
  target.append('<p>cat</p>');
}
function dog(target){
  target.append('<p>dog</p>');
}
function ape(target){
  target.append('<p>ape</p>');
}

調整

$(function(){
  $('button').click(function(){
    var innerType=$(this).data('innertype');
    var target=$('.inner').filter(function(){return $(this).data('innertype')==innerType;});
    $.when($('.inner').fadeOut().queue(function(){
      if($(this).filter(target).length>0){
        cat(target);
        dog(target);
      }
      $(this).dequeue();
    })).done(function(){
      $('.inner').filter(target).fadeIn().queue(function(){
        ape(target);
        $(this).dequeue();
      });
    });
  });
});
function cat(target){
  target.append('<p>cat</p>');
}
function dog(target){
  target.append('<p>dog</p>');
}
function ape(target){
  target.append('<p>ape</p>');
}
```

# 再調整
解決済み？
```javascript
<script>
$(function(){
  $('button').click(function(){
    var innerType=$(this).data('innertype');
    var target=$('.inner').filter(function(){return $(this).data('innertype')==innerType;});
    $.when($('.outer,.inner').fadeOut().queue(function(){
      if($(this).filter(target).length>0){
        cat(target);
        dog(target);
      }
      $(this).dequeue();
    })).done(function(){
      $('.outer').has(target).fadeIn();
      target.fadeIn().queue(function(){
        ape(target);
        $(this).dequeue();
      });
    });
  });
});
function cat(target){
  target.append('<p>cat</p>');
}
function dog(target){
  target.append('<p>dog</p>');
}
function ape(target){
  target.append('<p>ape</p>');
}
</script>
<div class="wrapeer">
dummy1
  <div class="outer" data-outerType="1">
dummy2
    <div class="inner" data-innerType="A">innerA</div>
    <div class="inner" data-innerType="B">innerB</div>  
  </div>
  <div class="outer" data-outerType="2">
dummy3
    <div class="inner" data-innerType="C">innerC</div>
    <div class="inner" data-innerType="D">innerD</div>  
  </div>
  <button type="button" data-innerType="A" data-outerType="1">A</button>
  <button type="button" data-innerType="B" data-outerType="1">B</button>
  <button type="button" data-innerType="C" data-outerType="2">C</button>
  <button type="button" data-innerType="D" data-outerType="2">D</button>
</div>
```

Comments

[yambejp]

全体をfadeoutをするとして、fadeinは指定した.innerとその親の
.outerだけなのでしょうか？
イマイチ説明が入ってきません

[kannmuri]

ありがとうございますー！

質問ではフェードアウトとインの要素は別々になっていると思うのでそこは変えたくなくて、たとえばAクリックのときは .ouer1 と .innerA だけを表示し、他を非表示にしたいです。

あと質問では挿入イベントですが実際はいろいろあるので、「<p>cat</p>の数で判定する」というより、「cat(); が実行済みかどうかで判定する」みたいな処理があればありがたいんですが、調べてもないんですよねそんなの…ｗ

[kannmuri]

>fadeinは指定した.innerとその親の.outerだけなのでしょうか？
ですです！細かくいいますと、「親の」っていうより、「クリックしたボタンのデータ属性の」っていう感じで考えております！

[yambejp]

outerを非表示にする必要ない気がします。
すべてinnerで完結していませんか？

[kannmuri]

質問は簡略版というかんじにしてますが、実際には .inner と .outer の間にもいっこ要素があって、そいつはfadeの対象にしたりしなかったりするので、やっぱり必要ですね。

[kannmuri]

解決しました！いろんなテクを伝授してくれてありがとうございます。
でもお使いの $.when() ですけど、deferred ってなくてもいいんですか？

[yambejp]

重要な情報は最低限の省略にしてくださいね
情報が後出しされると答えがブレます
解決済みみたいですが一応再調整版あげときました

[yambejp]

deferrd処理はpromiseを返さない非同期処理に使います
ちょっと理解しづらいとは思いますが
deferredするものとしないものがあることを認識してください

[kannmuri]

>重要な情報は最低限の省略にしてくださいね
やーもうこればっかりはほんっとーにすみませんでした。「素人が自己判断で省略するな」って、額に入れて壁にかけて毎日復唱して先祖代々伝えていきます！

>deferrd処理はpromiseを返さない非同期処理に使います
なるほど！勉強しておきます！

Answer 2

あまり理解できていなんですが、

$('.outer, .inner').fadeOut(200, function() {
    cat(); dog(); 
});	
$('.outer[data-outerType="'+outerType+'"], .inner[data-innerType="'+innerType+'"]').delay(200).fadeIn(200, function() {
    ape();
});	

の部分を

$('.outer').fadeOut(200, function() {
    cat(); dog(); 
});
$('.inner').fadeOut(200);

$('.outer[data-outerType="'+outerType+'"], .inner[data-innerType="'+innerType+'"]').delay(200).fadeIn(200, function() {
    ape();
});
$('.inner[data-innerType="'+innerType+'"]').delay(200).fadeIn(200);

に変更するのはダメでしょうか？（innerクラスに対してはcat() dog() ape()を行わなず、表示操作のみ行う)

追記：
すみません1つという要件を見逃していました。このコードで実現できます。

$('button').click(function(){
	const outerType = $(this).attr('data-outerType');
	const innerType = $(this).attr('data-innerType');
	$('.outer').fadeOut(200, function() {
    if ($(this).attr('data-outerType') === outerType) {
      cat(); dog(); 
    }
		
	});	
  
  $('.inner').fadeOut(200, function() {
	});	
  
	$('.outer[data-outerType="'+outerType+'"]').delay(200).fadeIn(200, function() {
		ape();
	});	
  
  $('.inner[data-innerType="'+innerType+'"]').delay(200).fadeIn(200, function() {
	});
  
});

function cat(outerType){
	$('.outer').append('<p>cat</p>');
}
function dog(outerType){
	$('.outer').append('<p>dog</p>');
}
function ape(){
	$('.outer').append('<p>ape</p>');
}

fadeout関数の中で呼ばれる$(this)は
現在fadeOutしているjQueryObjectを指します。
その為、「.outer」が2つ(outer-typeが2つ)あっても
押下したボタンから取得したouter-typeに合致する場合のみしか処理をしない
（outer要素は2つ消すが、cat()とdog()は1つのouter要素にしか処理をしない）
という動作を実現しています。

Comments

[kannmuri]

なるほど、.inner を fade の対象から外せば『６つ』から『２つ』になりましたね。でも『１つ』がいいんです。笑

[退会済みユーザー]

追記しましたので回答の方ご確認ください！

[kannmuri]

はっはーん！なるほど！どうもありがとうございます！

Answer 3

.promise().done() と記述することで全体の終了を待てます。

    $('.outer,.inner').fadeOut(200).promise().done(function() {
        cat();
        dog();
        $('.outer[data-outerType="'+outerType+'"],.inner[data-innerType="'+innerType+'"]').fadeIn(200).promise().done(function() {
           ape();
        }); 
    });

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