| Беляев Антон |
16.09.2018 17:14 |
Вычисления в цикле срабатывают, не дожидаясь выполнения анимации
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<script type="text/javascript" src= "jquery.js"></script>
<script type = "text/javascript" src = "script.js"></script>
<link href = "style.css" rel = "stylesheet">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id = "square"></div>
</body>
</html>
CSS:
Код:
#square{
background-image: url(square.png);
width: 68px;
height: 68px;
position: absolute;
}
JS:
$(document).ready(function(){
for(var i = 0; i<3000; i++){
window.date = new Date;
window.randomLeft = 0;
$("#square").css("display", "relative");
$("#square").animate({top: "578px"}, 5000);
$("#square").animate({top: "22px"}, 0);
window.milliseconds = date.getMilliseconds();
milliseconds = date.getMilliseconds();
if(milliseconds > 541){
milliseconds = milliseconds - 459;
}
randomLeft = Math.round(Math.random() * milliseconds);
$("#square").css("margin-left", randomLeft + "px");
}
})
После того, как анимация падения квадрата выполняется, отступ слева (randomLeft) должен меняться. Но, так как все итерации проходят до того, как проиграется анимация, то ничего не происходит. Пробовал вместо цикла использовать setInterval, но тогда надо, что бы каждая итерация длилась столько же, сколько и анимация, а это сделать не получается. Не подскажите, как решить проблему? |