this.element.style выдаёт ошибку
this.animation = function () {
if(this.i==true) {
this.over=false;
this.start = new Date().getTime();
}
this.i=false;
var now = (new Date().getTime()) - this.start; // Текущее время
var progress = now / this.duration; // Прогресс анимации
var result = (this.to - this.from) * Math.pow(progress,2) + this.from;
this.element.style.left = result + "px";
if (progress < 1) // Если анимация не закончилась, продолжаем
setTimeout(arguments.callee, 1);
else {
this.j=true;
this.globalResult = result;
this.out = true;
if(this.outFlag==true)
VerifyingFlagOut();
}
в этом методе происходит ошибка при попытке присвоить значение this.element.style.left переменной element я присваиваю значение путём передачи параметра при создании объекта. В чём может быть причина ошибки? Причём если присвоить какое-то конкретное число, то всё работает, но только в течении одной итерации. И ошибку все равно выдаёт. |
Ок. Какая ошибка? Что содержит result на итерации с ошибкой?
|
на итерации с ошибкой result содержит обыкновенное числовое значение и px, например, 2px. в значениях там порядок, проблема в другом...
window.onload = loadData;
function loadData(element) {
this.element=element;
this.i=true;
this.start = 0;
this.from = 0; // Начальная координата X
this.to = 15; // Конечная координата X
this.duration = 300; // Длительность
this.animation = function () {
if(this.i==true) {
this.start = new Date().getTime(); //время старта анимации
}
this.i=false;
var now = (new Date().getTime()) - this.start; // Текущее время
var progress = now / this.duration; // Прогресс анимации
var result = (this.to - this.from) * Math.pow(progress,2) + this.from;
this.element.style.left = result + "px";
if (progress < 1) // Если анимация не закончилась, продолжаем
setTimeout(this.animation, 1);
}
}
function createFacebookObject() {
var a = document.getElementById("facebook");
var facebook = new loadData(a);
facebook.animation();
}
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script type="text/javascript" src="Untitled-6.js" language="javascript"/> </script> </head> <body> <img id="facebook" onClick="createFacebookObject()" style="position:absolute; left:0px" src="../img/Facebook.png"/> </body> </html> Чтоб легче отслеживать ошибки, лучше закоментировать if (progress < 1). Я упростил код, чтоб было легче и нагляднее. Этот код по прежнему выдаёт ошибку, что типа невозможно присвоить значение к this.element.style.left . Я пользовался FireBug и заметил такую вещь, что эта ошибка выскакивает на второй итерации... и после прохождения первой итерации, переменная element перестаёт иметь свойство style. Тупо теряется куда-то... Я так понимаю, что проблема в setTimeOut, так как в обычном цикле всё работает как часы и структура переменных не меняется. И еще, вроде, if(this.i==true) тут до лампочки и время старта постоянно берется в каждой итерации новое. Мне надо, чтоб элемент facebook двигался при клике мышки вправо. Кстати, эта вся красота работает, если не использовать "классы" и объекты. Но мне надо именно так..., чтоб я мог привязать этот код к множеству элементов, путём создания каждому своего объекта. |
| Часовой пояс GMT +3, время: 04:44. |