на итерации с ошибкой 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 двигался при клике мышки вправо.
Кстати, эта вся красота работает, если не использовать "классы" и объекты. Но мне надо именно так..., чтоб я мог привязать этот код к множеству элементов, путём создания каждому своего объекта.