Question

我有一个动画脚本。我想无限重复它。但是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);
});

Answer 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");

Jquery无法重复动画 - 不可能的练习

1 个答案: