всем привет. С книжки Девида Фланегена решил протестировать скрипт, но почему то он не работает.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
/**
* AnimateCSS.js:
* Этот файл определяет функцию с именем animateCSS(), служащую основой
* для создания анимации на базе CSS. Аргументы функции:
*
* element: Анимируемый HTML-элемент.
* numFrames: Общее число кадров в анимации.
* timePerFrame: Количество миллисекунд отображения каждого кадра.
* animation: Объект, определяющий анимацию; описывается далее.
* whendone: Необязательная функция, вызываемая по завершении анимации.
* Если функция указана, ей в качестве аргумента передается
* значение аргумента element.
*
* Функция animateCSS() просто определяет платформу для анимации. Выполняемую
* анимацию определяют свойства объекта animation. Каждое свойство должно
* иметь то же имя, что и свойство CSS-стиля. Значением каждого свойства
* должна быть функция, возвращающая значения для этого свойства стиля.
* Каждой функции передается номер кадра и общий промежуток времени, прошедший
* с начала анимации, а функция может использовать это для вычисления
* значения стиля, которое она должна вернуть для данного фрейма.
* Например, чтобы анимировать изображение так, чтобы оно передвигалось
* из левого верхнего угла, вы можете вызвать функцию animateCSS так:
*
* animateCSS(image, 25, 50, // Анимировать изображение в течение 25 кадров
* // по 50 мс каждый
* { // Установить атрибуты top и left для каждого кадра:
* top: function(frame,time) { return frame*8 + "px"; },
* left: function(frame,time) { return frame*8 + "px"; }
* });
*
**/
function animateCSS(element, numFrames, timePerFrame, animation, whendone) {
var frame = 0; // Текущий номер кадра
var time = 0; // Общее время анимации, прошедшее с начала
// Определить вызов displayNextFrame() каждые timePerFrame миллисекунд.
// Так будет отображаться каждый кадр анимации.
var intervalId = setInterval(displayNextFrame, timePerFrame);
// На этом работа animateCSS() завершается, но предыдущая строка гарантирует,
// что следующая вложенная функция будет вызываться для каждого кадра анимации.
function displayNextFrame() {
if (frame >= numFrames) { // Проверить, не закончилась ли анимация
clearInterval(intervalId); // Если да - прекратить вызовы
if (whendone) whendone(element); // Вызвать функцию whendone
return; // И завершить работу
}
// Обойти в цикле все свойства, определяемые объектом анимации
for(var cssprop in animation) {
// Для каждого свойства вызвать его функцию анимации, передавая
// ей номер кадра и прошедшее время. Используем возвращаемое
// функцией значение в качестве нового значения соответствующего
// свойства стиля для указанного элемента. Используем блок
// try/catch, чтобы игнорировать любые исключительные ситуации,
// возникающие из-за неверных возвращаемых значений.
try {
element.style[cssprop] = animation[cssprop](frame, time);
} catch(e) {}
}
frame++; // Увеличить номер кадра
time += timePerFrame; // Увеличить прошедшее время
}
}
</script>
</head>
<body>
<div id="title" style="
position: absolute;
top: 300px;
width: 300px;
height: 300px;
background-color: green;
clip: rect(auto 10px auto auto);">Текст</div>
<script>
// Анимируем элемент с идентификатором "title", используя 40 кадров
// по 50 миллисекунд каждый
animateCSS(document.getElementById("title"), 40, 50,
{ // Так устанавливаются свойства top и clip для каждого кадра:
top: function(f,t) { return 300f*5 + "px"; }
clip: function(f,t) {return "rect(auto "+f*10+"px auto auto)";}
});
</script>
</body>
</html>
Заранее спасибо! Я уже пол дня не могу понять в чем загвоздка
