JQuery fadeIn called twice after fadeOut

Situation: I have 8 slides. When the page starts, everything is hidden, except for the initial one, when the first clicked, it disappears, and then 3 more disappear one by one, when 3 there they disappear (the maximum number that can fit is 3), and then I fadeIn the next 3 , after that I will hide them and fadein The last that remains. The result and animation are all right, but I encounter a problem that after fadeOut all the slides, the next fadeIn is called twice, and it twists the general view of the animation. I tried a lot of things, the method of stopping, recording it with the help of skins and other things, what could cause the problem?

Jquery code:

$(".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 tips? live example here: www.iamrokas.com/demo_boxi Console.log is used to check when an event is fired

!

+5
1

, . , $('.slide').fadeOut complete , DOM = slide!!

1) promise() . JSFIDDLE, . , , 8 .

2) length , .

3) : , . , . , length setTimeout.

.

+11

All Articles