Анимация на чистом JS
 

доброго времени суток всем, я на основе этой статьи написал нижеследующий код:

function select(selector) {
	var s = typeof selector == 'string' ? document.querySelector(selector) : selector;

	this.animate = function (options, duration, delay) {
		var start = new Date().getTime();

		duration = duration || 500;

		delay = delay || 10;
		if (delay < 10) delay = 10;
		else if (delay > 2000) delay = 2000;

		for (var prop in options) {
			var value = options[prop],
				currentValue = parseInt(s.style[prop]);

			setTimeout(function anim() {
				var now = (new Date().getTime()) - start,
					progress = now / duration,
					result = (value - currentValue) * progress + currentValue;

				s.style[prop] = result;

				if (progress < 1) setTimeout(anim, delay);

			}, delay);
		}
	};

	return this;
}

select('#test').animate({
	width: 57,
	height: 57
}, 2000);

ну что-то на подоьие jquery.. вроде всё прекрасно работает, но только если свойств всего один, а если их больше, в таком случае анимация применяется только к последнему, в чём проблема? может быть что код некорректный? я просто только начал изучать ооп относительно js, поэтому подскажите пожалуйста как правильно поступить

p.s: я понимаю что использовать библиотеки это быстро, 100% кроссбраузерно, без лишних нервов и т. д. и т. п., но изучать и понять принцип чистую js-анимации очень хочется, мне уже во сне снится это :)

Tecvid,
потому что переменная prop строка 13 хранит последнее значение и строка 22 может получить только его.

а как тогда сделать правильно? чтобы одновременно анимировались все указанные свойства

Tecvid,
через замыкание или перебор добавить в саму функцию anim

Tecvid,
Вариант с замыканием ...

<div id="test" style="background-color: rgb(255, 102, 255); height: 50px; width: 50px"></div>
<script>
function select(selector) {
    var s = typeof selector == "string" ? document.querySelector(selector) : selector;
    this.animate = function(options, duration, delay) {
        var start = (new Date).getTime();
        duration = duration || 500;
        delay = delay || 10;
        if (delay < 10) delay = 10;
        else if (delay > 2E3) delay = 2E3;
        for (var prop in options) {
            var value = options[prop],
                currentValue = parseInt(s.style[prop]);
            +function(a, b, c) {
                return function anim() {
                    var now = (new Date).getTime() - start,
                        progress = now / duration,
                        result = (a - b) * progress + b;
                    s.style[c] = progress < 1 ? result + "px" : a + "px";
                    if (progress < 1) setTimeout(anim, delay)
                }
            }(value, currentValue, prop)()
        }
    };
    return this
};

select('#test').animate({
	width: 100,
	height: 100
}, 2000);
</script>

спасибо вам огромное! ммдаа в js с замыканиями реально как-то иначе)

Tecvid,
по замыканию
http://javascript.ru/basic/closure#p...-ispolzovaniya
по +function
http://shamansir.github.io/JavaScrip...unction.scopes

а за ссылки особое спасибо! :) очень очень признателен

имхо приведенная статья уже чудовищно устарела
неплохо для начала просто почитать текущий стандарт
web-animations
И мне очень не нравится когда используют setTimeout =( (ссылка на старую тему)

MallSerg прав. Обязательно ознакомиться с css3 анимациями, если этого мало - с нативным animate(), его полифилом, и requestAnimationFrame - для ознакомления или написания своего 'animate()'