JQuery fadeIn viene chiamato due volte dopo fadeOut

Question

La situazione: ho 8 diapositive. Quando la pagina inizia tutte sono nascoste, tranne quella di partenza, quando viene cliccato il primo si dissolve e poi altre 3 si attenuano una dopo l'altra, quando 3 sono lì fadeout (il numero massimo che può essere inserito è 3) e poi scompare il prossimo 3, dopo che li nascondo e svanisco L'ultimo che rimane. Il risultato e l'animazione è tutto a posto, ma mi trovo ad affrontare un problema che dopo la dissolvenza di tutte le diapositive, il prossimo fadeIn viene chiamato due volte e strappa l'aspetto generale dell'animazione. Ho provato molte cose, il metodo stop, scrivendolo con hide e altre cose, cosa potrebbe causare il problema?

Il codice per 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); 
} 

Eventuali consigli? live esempio qui: www.iamrokas.com/demo_boxi Console.log viene utilizzato per controllare quando l'evento inizia

Grazie!

Answer 1

Mi ci è voluto un po 'per rendermene conto. Il problema è che la funzione completa di $('.slide').fadeOut viene sparata più volte perché ci sono più DOM con class = slide !!

1) Utilizzare il metodo promise() per eseguire la funzione completa una sola volta. Dai un'occhiata allo JSFIDDLE che ho creato per te. Vedrete che ogni numero viene stampato una sola volta nella console anziché 8 volte.

2) Ho aggiunto una variabile globale length per modificare dinamicamente il tempo che deve trascorrere prima dell'animazione successiva.

3) Si noti che l'ordine di esecuzione non è sequenziale come previsto. Pensa a tutto ciò che viene eseguito simultaneamente. È importante notare che length viene assegnato prima della funzione setTimeout.

Ho utilizzato questo riferimento Execute complete function only once.