6

情况：我有 8 张幻灯片。当页面开始时，除了开始的页面外，所有页面都被隐藏，当第一个被点击时它会淡出，然后3个又一个又一个淡入，当有3个时它们淡出（可以容纳的最大数量是3）然后我淡入接下来的 3 个，之后我隐藏它们并淡入最后一个留下的。结果和动画都很好，但我面临一个问题，即在所有幻灯片的淡出之后，下一个淡入被调用两次，它破坏了动画的整体外观。我尝试了很多东西，停止方法，用隐藏和其他东西写它，可能导致问题的原因是什么？

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

谢谢！

4

1 回答 1

14

我花了一段时间才意识到这一点。问题是$('.slide').fadeOut完整的函数会被多次触发，因为有多个带有 class = slide 的 DOM！

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

2）我添加了一个全局变量length来动态改变下一个动画之前应该经过的时间。

3) 请注意，执行顺序并不像人们预期的那样是连续的。想想同时执行的所有事情。重要的是要注意length确实在setTimeout函数之前分配。

我使用了这个参考Execute complete function only once。

于 2013-04-19T03:58:58.203 回答