在fadeOut之后，JQuery fadeIn会被调用两次

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?

我有8张幻灯片。当页面开始隐藏,除了一开始,当第一个点击它会淡出,然后三个在一个接一个的消失,当3有他们渐隐(最大数量可以是3)然后我渐显未来3,之后我把他们藏和渐显呆的最后一个。结果和动画都很好，但我面临一个问题，在所有幻灯片的fadeOut被调用两次之后，它就会破坏动画的整体外观。我尝试了很多东西，停止方法，用隐藏和其他东西写，什么会导致问题?

The code for jquery:

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

任何建议吗?现场示例:www.iamrokas.com/demo_boxi控制台。日志用于检查事件何时开始

Thank you!

谢谢你！

1 个解决方案

#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!!

我花了一段时间才意识到这一点。问题是$('.slide')。fadeOut的完整函数会被多次触发，因为有多个dom具有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.

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

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.

注意，执行顺序并不像人们预期的那样是顺序的。考虑一下同时执行的所有东西。值得注意的是，在setTimeout函数之前，确实分配了长度。

I used this reference Execute complete function only once.

我只使用了这个引用执行完整函数一次。

#1