jQueryで要素を順番に表示させたい

Question

現在トップに画像をバラバラに表示させて全ての表示が終わったらfadeOutするようにしているのですが、
fadeOutの処理が終わった後にまた別の要素(.クラス名)を順番に表示させる方法が分かる方はいらっしゃいますでしょうか？

今回は.topがfadeOutした後に.contentsをfadeInさせるといったような事が出来るといいのですが。

そして次は.contentsがfadeOutしたあとにまた新たな要素を表示させるという風に出来れば一番ありがたいです。

<div class="top">
  <li><img src="1.jpg"></li>
  <li><img src="2.jpg"></li>
  <li><img src="3.jpg"></li>
</div>


<div class="contents"></div>

<div class="contents2"></div>

var element = $('.top li img');
element.css({'opacity': '0'});

$(window).on('load', function() {

  randomShow();
  function randomShow() {

    var elmLength = element.length,
    randSet = Math.floor(Math.random() * elmLength);

    $(element[randSet]).animate({'opacity': '1'}, 1400);
    element.splice(randSet, 1);

    if ( elmLength > 0 ) {
      setTimeout(function() {randomShow();}, 400);

      $(this).fadeOut(2000);

    } else {

  	setTimeout(function() {
  		$('.top').fadeOut(2000);
  	}, 1000);
  }
}
});

.contentsに関してはどこに書けばいいのかが分からなかった為、まだ書いていません。

3/8追記：ご回答いただいた方々へ。大変感謝しております。
まだ解決には至ってはいないのですが、今の自分のJavaScriptの理解度だとまだ何も出来ないしせっかくいただいたコードを読む事も出来ないと感じました。
これからもっと勉強をして再度質問が出来たらと思います。

本当にありがとうございます。お手数をおかけして大変申し訳ございませんでした。

Comments

[Lhankor_Mhy]

ご提示のコードの中に .contents が見当たりませんでしたので、ご明示ください。
変数の中に入っているのでしょうか？

[yokoyama_takuzo]

すみません。.contentsはまだJavaScriptの中には書いていませんでした。続きをどこに書けばいいのかも分からなかったもので、単純に<div class="contents"></div>を.topがfadeOutした後に表示させるだけでいいのですが。

Answer 1

アニメ系のメソッドはアニメーション完了時のコールバックを設定できるため、そこで次のアニメを書いてみてはどうでしょうか？
コールバックの this に完了した要素が設定されています。

function complete() {
  console.log(this);
}

$('.top').fadeOut(2000, complete);

https://api.jquery.com/fadeOut/

Comments

[yokoyama_takuzo]

回答ありがとうございます！実は私自身JavaScriptの勉強をし始めたばかりでまだ何も分からない状態で質問をしてしまい大変申し訳ないです。昨日インターネットでコールバックについても見てみたのですが自分ではなかなか理解が出来ずで。一度こちらの方法もまた勉強をしてみて試してみたいと思います。どうもありがとうございました！感謝しています！

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script>
$(function(){
  var element = $('.top li img');
  element.hide();
  var imgs=[];
  var wait=500;
  setInterval(function(){
    if(!element.is(':not(:visible)')){
      element.fadeOut();
    }else{
      if(imgs.length==0){
        imgs=element.map(function(x){
          return {id:x,sort:Math.random()};
        }).get().sort(function(x,y){
          return x.sort-y.sort;
        }).map(function(x){
          return x.id;
        });
      };
      element.eq(imgs.shift()).fadeIn();
    }
  },wait);
 
});
</script>
<div class="top">
<ul>
<li><img alt="img1"></li>
<li><img alt="img2"></li>
<li><img alt="img3"></li>
<li><img alt="img4"></li>
<li><img alt="img5"></li>
<li><img alt="img6"></li>
</ul>
</div>

Comments

[yokoyama_takuzo]

回答ありがとうございます！一応上記の方法を試してはみたのですがやはり.topの処理をしている間に.contentsがもう既に動いているみたいです。私の説明が非常に悪かったため、再度質問の修正をしました。ありがとうございます。

[yambejp]

＞ .topの処理をしている間に.contentsがもう既に動いているみたい

そんなことはないですけどね
上記をコピペして、waitを2000とかにして実行してみてください
fadeOutしたあと一呼吸おいてfadeInが始まってます

[yokoyama_takuzo]

yambejp様がおっしゃっている意味がやっと分かりました。.topが消えて現れてとループされていますね。
これを例えばループではなく.topの表示が終わったあとに別の要素を表示する(例えば自分で新たに作ったアニメーションの<div class=".contents"></div>)を表示したい場合は、element.eq(imgs.shift()).fadeIn();の部分を変えればいいのでしょうか？JavaScriptを勉強し始めたばかりで何も出来なくて本当に質問をする事が申し訳ないです。