JQuery fadeIn在淡出后被调用两次
情境:我有8张幻灯片。当页面开始时,除开始的页面外,所有页面都隐藏,当单击第一个页面时,它会淡出,然后依次淡入3个页面,当有3个页面时,它们会淡出(可容纳的最大数字为3),然后我会淡出下一个3个页面,之后我会隐藏它们并淡出最后一个页面。结果和动画都很好,但我面临一个问题,在所有幻灯片淡出后,下一个fadeIn会被调用两次,它会破坏动画的整体外观。我尝试了很多方法,停止方法,用隐藏和其他东西来写,是什么导致了问题 jquery的代码是:JQuery fadeIn在淡出后被调用两次,jquery,animation,callback,fadein,repeat,Jquery,Animation,Callback,Fadein,Repeat,情境:我有8张幻灯片。当页面开始时,除开始的页面外,所有页面都隐藏,当单击第一个页面时,它会淡出,然后依次淡入3个页面,当有3个页面时,它们会淡出(可容纳的最大数字为3),然后我会淡出下一个3个页面,之后我会隐藏它们并淡出最后一个页面。结果和动画都很好,但我面临一个问题,在所有幻灯片淡出后,下一个fadeIn会被调用两次,它会破坏动画的整体外观。我尝试了很多方法,停止方法,用隐藏和其他东西来写,是什么导致了问题 jquery的代码是: $(".slide_top").click(function
$(".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();…我得到了错误..我发现你从来没有为任何问题选择过答案,包括这个问题。如果答案提供了一个好的解决方案,你应该接受它。