Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/76.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/google-sheets/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
JQuery fadeIn在淡出后被调用两次_Jquery_Animation_Callback_Fadein_Repeat - Fatal编程技术网

JQuery fadeIn在淡出后被调用两次

JQuery fadeIn在淡出后被调用两次,jquery,animation,callback,fadein,repeat,Jquery,Animation,Callback,Fadein,Repeat,情境:我有8张幻灯片。当页面开始时,除开始的页面外,所有页面都隐藏,当单击第一个页面时,它会淡出,然后依次淡入3个页面,当有3个页面时,它们会淡出(可容纳的最大数字为3),然后我会淡出下一个3个页面,之后我会隐藏它们并淡出最后一个页面。结果和动画都很好,但我面临一个问题,在所有幻灯片淡出后,下一个fadeIn会被调用两次,它会破坏动画的整体外观。我尝试了很多方法,停止方法,用隐藏和其他东西来写,是什么导致了问题 jquery的代码是: $(".slide_top").click(function

情境:我有8张幻灯片。当页面开始时,除开始的页面外,所有页面都隐藏,当单击第一个页面时,它会淡出,然后依次淡入3个页面,当有3个页面时,它们会淡出(可容纳的最大数字为3),然后我会淡出下一个3个页面,之后我会隐藏它们并淡出最后一个页面。结果和动画都很好,但我面临一个问题,在所有幻灯片淡出后,下一个fadeIn会被调用两次,它会破坏动画的整体外观。我尝试了很多方法,停止方法,用隐藏和其他东西来写,是什么导致了问题

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的完整函数被多次激发,因为存在多个class=slide的DOM

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

2) 我添加了一个全局变量
length
,以动态更改下一个动画之前应该经过的时间

3) 注:执行顺序并非如预期的那样连续。想想所有的事情都是同时执行的。需要注意的是,
length
确实在
setTimeout
函数之前分配


我使用了此引用。

您在哪里尝试过.stop()?$('.slide.four').stop(true,true)。delay。。。和维切维萨。两者都没有带来积极的结果。与上一张幻灯片相同。您是否尝试过event.stopPropagation();在每个动画之后?我具体应该在哪里使用它?怎么做?举个例子?当我像这样使用它:$('.slide').fadeOut(300,function(event){event.stopPropagation();…我得到了错误..我发现你从来没有为任何问题选择过答案,包括这个问题。如果答案提供了一个好的解决方案,你应该接受它。