在fadeOut之后,JQuery fadeIn被调用两次

情况：我有8张幻灯片.当页面开始时,除了起始页面之外全部被隐藏,当点击第一个时它逐渐消失,然后一个接一个地淡出3个,当3个在那里时它们淡出(最大数量可以适合是3)然后我淡入接下来的3,之后我把它们隐藏起来并且最后一个留下来.结果和动画都很好,但我遇到的问题是,在所有幻灯片的fadeOut之后,下一个fadeIn会被调用两次,它会影响动画的整体外观.我尝试了很多东西,停止方法,用hide和其他东西写它,什么可能导致问题？

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用于检查事件何时开始

谢谢！

解决方法

我花了一段时间才意识到这一点.问题是$(‘.slide’).fadeOut的完整函数被多次触发,因为有多个DOM使用class = slide !!

1)使用promise()方法只执行一次完整的函数.
查看我为您创建的JSFIDDLE.
您将看到每个数字仅在控制台中打印一次而不是8次.

2)我添加了一个全局变量长度来动态地改变下一个动画之前应该经过的时间.

3)注意执行顺序不是人们所期望的顺序.想想同时执行的所有事情.重要的是要注意长度确实在setTimeout函数之前分配.

我用了这个参考号Execute complete function only once.