Читать книгу Интерактивная анимация HTML5. Методические указания - Михаил Ботов - Страница 2

Простую анимацию можно организовать при помощи функции setInterval (); Она циклически вызывает переданный ей метод через заданные интервалы времени до тех пор, пока не будет остановлена функцией clearInterval ();

Пример – смещение блока разметки вправо:

<script>

function move (elem) {

var left = 0; // начальное значение

function frame () {// функция для отрисовки

left++

elem.style. left = left + ’px’

if (left == 100) {

clearInterval (timer); // завершить анимацию

}

}

var timer = setInterval (frame, 100) // рисовать каждые 100мс

}

</script>

<div onclick="move(this.children [0])» class=«example_path»>

<div class=«example_block»> </div>

</div>