动画结束后Javascript穿孔动作
动画结束后Javascript穿孔动作
提问于 2016-12-05 09:07:17
我想在动画完成后更改文本，但是我很难找到一些有用的东西。我试过定时器，但那不真实的工作，因为动画时间是不同的，每次(将补充，但现在，它是相同的，每次)。
$(document).ready(function () {
$("button").click(function () {
var r = Math.floor(Math.random() * 2) + 1
var moveTime;
if (r == '1') {
moveTime = 5000;
} else if (r == '2') {
moveTime = 4900;
}
var slowDown = 1000;
var $div = $('div').css('left', 0);
while (moveTime > 0) {
slowDown--;
$div.animate({
left: moveTime + "px"
}, 3000);
if (slowDown > 0) {
slowDown--;
moveTime = 0;
}
slowDown--;
moveTime--;
}
document.getElementById("timer").innerHTML = r;
});
}); div {
position: absolute;
float: left;
margin: 200px 0 0 -8400px;
width: 10000px;
height: 125px;
background: repeating-linear-gradient(90deg, #DF0000, #DF0000 125px, #000000 125px, #000000 250px)
}
h1 {
text-align: center;
margin: 130px 0 0 0;
font-size: 90px;
}
body {
overflow: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Start Animation</button>
<div></div>
<h1 id="timer">|</h1>
</body>
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-12-05 09:17:38
您可以使用promise()方法将您的动画映射到一系列承诺，然后当所有的承诺都已解决时，使用Promise.all()来做一些事情：
var promisesArr = [];
while (moveTime > 0) {
// ...
promisesArr.push($div.animate({
left: moveTime + "px"
}, 3000).promise());
// ...
}
Promise.all(promisesArr).then(function() {
var r = Math.floor(Math.random() * 2) + 1
document.getElementById("timer").innerHTML = r;
});请参阅小提琴
Stack Overflow用户
发布于 2016-12-05 09:14:30
见动画制作的官方api
您应该能够只调用$(elem).animate().animate()，第二个动画只有在第一个动画结束时才会启动.
此外，动画函数采用‘宽松’参数，类似"easein“之类的东西可能会做您想做的事情，而不需要跟踪时间。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40970595
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号