Всем здравствуйте!
Написал программу, которая должна выполнять анимацию в виде плавного смещения div'а по вертикали из позиции 100px в позицию 200px:
<style>
div#square {
position: absolute;
height: 100px;
width: 100px;
background-color: red;
}
</style>
<input type="submit" value="Go" onclick="go()"/>
<div id="square"></div>
<script>
function go() {
for(i=100;i<200;i++) {
document.getElementById("square").style.top = i+"px";
}
}
</script>
Однако работает она не так, как ожидалось. Вместо плавного перемещения, div сразу прыгает в позицию 200px. По-видимому, все изменения, вносимые JavaScript-ом в документ как бы кэшируются до завершения обработчика события. Есть ли возможность принудительно выводить содержимое этого кэша до завершения обработчика? Например, какая-нибудь функция наподобие fflush в Си? Чтобы можно было написать вот так вот, и программа бы заработала:
<input type="submit" value="Go" onclick="go()"/>
<div id="square"></div>
<script>
function go() {
for(i=100;i<200;i++) {
document.getElementById("square").style.top = i+"px";
//Очищаем кэш и выводим его содержимое на экран
fflush(html);
}
}
</script>
PS: Я знаю, что такую анимацию правильнее реализовывать с помощью setTimeout. Интерес чисто технический, возможно ли в принципе заставить работать тот код, который я привёл.