javascript - アニメーション化してから、div のクラスをフェード効果に置き換えます

Question

JSFiddle:フィドル

動作するはずの方法は次のとおりです。

1 - 赤いブロックが上から下にスライドします
2 - それが完了すると、赤いボックスがフェードアウトします
3 - 次に青いボックスがフェードインします

以下はhtmlです：

<div class="posRel">
    <div class="trans1"></div>
    <div class="trans2"></div>
    <div class="trans3"></div>
    <div class="trans4"></div>
    <div class="trans5"></div>
    <div class="trans6"></div>
    <div class="trans7"></div>
</div>

以下はjsです：

    for (i = 1; i <= 7; i++) {
        $('.trans' + i).toggleClass('toggle');
    }

    setTimeout(function () {
        $('.toggle').fadeOut('slow', function () {
            $(this).addClass('fSmall1').fadeIn('slow');
        });
    }, 2000);

プロジェクトへのリンク:http://50.87.144.37/~projtest/team/design/EO/page-2.html

JSFiddleへのリンク

私が直面している問題:

• フェードアウトとフェードインが機能しない
• これを行うには settimeout よりも優れた方法はありますか?

私はjs/jQueryに関してはかなり経験が浅いので、ばかげた間違いも遠慮なく指摘してください。ありがとう。