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
!