jquery不能重复动画 - 不可能的练习答案

【问题标题】：Jquery can not repeat animation - Impossible exercisejquery不能重复动画 - 不可能的练习
【发布时间】：2018-02-08 17:04:40
【问题描述】：

我有一个动画脚本。我想无限重复它。但是 setInterval 不适用于我的脚本。

这是我的代码：

function waw_animation(){
$("#first").animate({left: "0px"}, 1000);
$("#first").delay(1000).animate({opacity: '0'}, 1000);
$("#second").delay(2000).animate({right: '0px'}, 1000);
$("#second").show(500);
$("#second").delay(1000).animate({opacity: '0'}, 1000);
$("#third").delay(5000).animate({right: '0px'}, 1000);
$("#third").show(500);
$("#third").delay(1000).animate({opacity: '0'}, 1000);
$("#fourth").delay(8000).animate({left: "0px"}, 1000);
$("#fourth").delay(1000).animate({opacity: '0'}, 1000);
$("#fifth").delay(11000).animate({left: "0px"}, 1000);
$("#fifth").delay(1000).animate({opacity: '0'}, 1000);
$("#sixth").delay(14000).animate({right: '0px'}, 1000);
$("#sixth").show(500);
$("#sixth").delay(2000).animate({opacity: '0'}, 1000);
$("#seventh").delay(18000).animate({left: '0px'}, 1000);
$("#eighth").delay(19000).animate({left: '0px'}, 1000);
$("#nineth").delay(20000).animate({left: '0px'}, 1000);
$("#seventh").delay(3000).animate({opacity: '0'}, 1000);
$("#eighth").delay(3000).animate({opacity: '0'}, 1000);
$("#nineth").delay(3000).animate({opacity: '0'}, 1000);
$("#tenth").delay(26000).animate({opacity: '1'}, 1000);
$("#tenth").delay(10000).animate({opacity: '0'}, 1000);
}

$(document).ready(function(){
setInterval(function(){ waw_animation(); }, 1000);
});

【问题讨论】：

是我，还是我这里没有看到setInterval？
这里不是 setInterval 但如果我输入 setInterval 代码不起作用...
点赞$(document).ready(function(){ setInterval(function(){ waw_animation(); }, 1000); });
好的，所以如果没有setInterval，您的代码只会执行一次。对waw_animation() 的单次调用是否提供了您的预期结果？如果没有，那么也为您的问题提供标记。
是的，没有 setInterval 我的代码是完美的。但我不想玩一次。它必须是无限的。

标签： jquery animation jquery-animate

【解决方案1】：

我解决了。代码说：

$("#first").delay(1000).animate({opacity: '0'}, 1000);
$("#second").delay(2000).animate({right: '0px'}, 1000);

但是如果函数重新启动不透明度并且绝对正确的位置没有后退。

解决方案是：

#first,
#second,
#third,
.
.
.
#tenth

这个元素有两个类：

.from-left
or
.from-right

我把这行放在我的函数前面：

$(".from-right").hide();
$(".from-left").css("left", "-100%");
$(".from-left").css("opacity", "1");
$(".from-right").css("right", "-100%");
$(".from-right").css("opacity", "1");

【讨论】：