JQuery fadeInはfadeOutの後に2回呼び出されます

Question

状況：私は8つのスライドを持っています。ページが開始されると、最初のものを除いてすべてが隠されます。最初のものがクリックされるとフェードアウトし、次に3つずつ次々とフェードインします.3つはフェードアウトします（最大の数は3です）。次にfadeIn次の3、その後、私はそれらを隠すとフェードイン最後に残っているもの。結果とアニメーションはすべて問題ありませんが、すべてのスライドのfadeOutの次のfadeInが2回呼び出され、アニメーションの全体的な見た目が悪いという問題に直面します。私は多くのことをやってみました、停止方法、隠しや他のものでそれを書いて、何が問題を引き起こす可能性がありますか？ jqueryのための

コード：

$(".slide_top").click(function() { 
animacija_init(); 
}); 

var kadras; 
var laikmatis; 

function animacija_init() { 
    kadras = 1; 
    $(".slide_top").fadeOut(500); 
    animacija_trigger(); 
} 

function animacija_trigger() { 
    if(kadras == 1) { 
     $('.slide.one').delay(500).fadeIn("slow"); 
     console.log("1");  
    } 
    if(kadras == 2) { 
     $('.slide.two').fadeIn("slow"); 
     console.log("2"); 
    } 
    if(kadras == 3) { 
     $('.slide.three').fadeIn("slow"); 
     console.log("3"); 
    } 
    if(kadras == 4) { 
     $('.slide').fadeOut(300, function() { 
      $('.slide.four').delay(100).fadeIn("slow"); 
      console.log("4"); 
     }); 
    } 
    if(kadras == 5) { 
     $('.slide.five').fadeIn("slow"); 
     console.log("5"); 
    } 
    if(kadras == 6) { 
     $('.slide.six').fadeIn("slow"); 
     console.log("6"); 
    } 
    if(kadras == 7) { 
     $('.slide').fadeOut(300, function() { 
      $('#last_slide').delay(300).fadeIn("slow"); 
      console.log("7"); 

    }); 
    } 
    kadras++; 
    laikmatis = setTimeout('animacija_trigger()', 2500); 
    if(kadras == 8) { 
     baigti_animacija(); 
    } 
} 

function baigti_animacija() { 
    clearTimeout(laikmatis); 
} 

任意のアドバイス？ライブの例はこちら：www.iamrokas.com/demo_boxi Console.logは、イベントの開始時にチェックするために使用されます。

ありがとう！

Answer 1

これを実現するにはしばらく時間がかかりました。問題は、クラス= slideの複数のDOMがあるため、$('.slide').fadeOutの完全な関数が複数回起動されることです。

1）完全な機能を実行するには、promise()メソッドを1回だけ使用します。 私が作成したJSFIDDLEをチェックしてください。 各番号は8回ではなく1回だけコンソールに表示されます。

2）グローバル変数lengthを追加して、次のアニメーションの前に経過する時間を動的に変更しました。

3）実行順序は予期されているように順次ではありません。すべてが同時に実行されていると考えてください。 lengthがsetTimeout機能の前に割り当てられることに注意することが重要です。

私はこのリファレンスを使用しました。Execute complete function only once。