jquery - セムナティック UI コンポーネントの遷移グループの順序

Question

セマンティック UI トランジション (css、js) を使用しており、フェードインする html オブジェクトがいくつかあります。

<div id="div1" class="fadding1 transition">
<div id="div2" class="fadding1 transition">
<div id="div3" class="fadding1 transition">
<div id="div4" class="fadding1 transition">
<div id="div5" class="fadding1 transition">

次に、jQuery スクリプトから呼び出すことで、それらを順番にフェードできます。

$('.fadding1').transition({
            animation: 'fade',
            duration: 1500,
            interval: 400
        });

したがって、それらはdiv1からdiv5へと順番にフェードインし始めます。ここで、 div1、div4、div5、div2、 div3 の順にフェードさせたいとしましょう。以下のような2つの異なるクラスでonCompleteを試しましたが、個々のコンポーネントがフェードした後にトリガーされます。

<div id="div1" class="fadding1 transition">
<div id="div2" class="fadding2 transition">
<div id="div3" class="fadding2 transition">
<div id="div4" class="fadding1 transition">
<div id="div5" class="fadding1 transition">

および jQuery スクリプト:

$('.fadding1').transition({
            animation: 'fade',
            duration: 1500,
            interval: 400,
            onComplete: function() {
                $('.fadding2').transition({
                    animation: 'fade',
                    duration: 1500,
                    interval: 400
                });
        });

したがって、異なるクラス (1,4,5) と (2,3) を作成しても役に立ちません。最後の解決策はカスケード機能ツリーを作成することですが、(5 つだけではなく) 多くのコンポーネントがあるため、これは望ましくありません。