Показать сообщение отдельно
  #1 (permalink)  
Старый 26.11.2014, 22:58
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

Анимация на чистом 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-анимации очень хочется, мне уже во сне снится это
Ответить с цитированием