JQuery fadeIn gets called twice after fadeOut

Question

The situation: I have 8 slides. When the page starts all are hidden except for the starting one, when first one is clicked it fades out and then 3 more fade in one after another, when 3 are there they fadeout(max number which can fit is 3) and then I fadeIn the next 3, after that i hide them and fadein The last one which stays. The result and animation is all fine but I face a problem that after the fadeOut of all slides the next fadeIn gets called twice and it screws the overall look of animation. I tried many things, the stop method, writing it with hide and other things, what could cause the problem?

The code for 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);
}

Any advices? live example here: www.iamrokas.com/demo_boxi Console.log is used for checking when the event starts

Thank you!

Answer 1

It took me a while to realize this. The problem is that $('.slide').fadeOut 's complete function gets fired multiple times because there are multiple DOMs with class = slide!!

1) Use promise() method to execute complete function only once. Check out the JSFIDDLE that I created for you. You will see that each number is printed only once in the console rather than 8 times.

2) I added a global variable length to dynamically alter the time that should elapse before the next animation.

3) Note the order of execution is not sequential as one may expect. Think of everything being executed simultaneously. It is important to note that length does get assigned before setTimeout function.

I used this reference Execute complete function only once.