アニメーションが終了した後でテキストを変更したいが、動作するものを見つけるのが難しい。私はタイマーを試しましたが、それは実際には動作しません。アニメーションの時間は毎回異なります(後でそれを追加しますが、今は毎回同じです)。アニメーション終了後のJavaScriptの実行アクション
$(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>
ステップ1を参照してください。 animate' documentation](http://api.jquery.com/animate)を参照してください。 –