Проблемы с анимацией

[dmitriymar]

x-yuri,
можеш не приводить мне примеры на дждиквери-я его заведомо отказался изучать. понять могу что написано что на нём но на это нужно время. всё что на нём легко сделать-всё тоже можно на скрипте.ну да кода больше-ну дак он используется повторно и позволяет делать то чего не может джиквери

[dmitriymar]

(function () {
var callee = arguments.callee;
$("#id").animate({
top: "+=180px"
}, 3000, function () {
$(this).animate({
top: "-=180px"
}, 3000, callee);
});
})();

по поводу этого сказать ничего не могу-во первых с джиквери не хочу голову морочить и Вторых-значение таймера здесь не присутствует вызывающего функцию. так что всё может быть-только ведь даж если не будет ошибки с таймером-ронять он будет только с верхней точки(если событе он клик вклинится между анимейтами-вклинится или нет -не знаю-но наверное наврядли)-так что вероятнее всего никогда не уронит- поскольку событие роняния может выполнится когда контейнер будет и так в нижней точке.знаю могу налететь на возражение -что может упасть ещё ниже-но этот вариант не рассматриваю поскольку он противоречит условиям задачи. и его выполнение будет означать неправильное решение задачи-не соответствие условиям

[x-yuri]

ну так у exec такая большая карма, потому что всем влом его код читать а если серьезно, то где там проблема? Его скрипт упрощенно работает так:

setTimeout(function(){
    <сдвигаем квадрат>
    setTimeout(arguments.callee, 13);
}, 13)

по такой же схеме работает анимация в jQuery. А чтобы не осталось никаких сомнений я добавил возможность остановить квадрат:

<div id='foo' style='width: 50px; height: 50px; position: absolute; background: #555555'>
</div>

<script type='text/javascript'>
window.onload = function () {
function delta(progress) {
     function d(progress) {
        for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
           if (progress >= (7 - 4 * a) / 11)
               return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
        }
     }
     return 1 - d(1 - progress);
}

	document.getElementById("foo").onclick = function () {
		var E = this;
		var timerId;
		this.onclick = function(){
			clearTimeout( timerId );   // !!! останавливаем квадрат
		};
		var go = function( toTop, from, to ){
			var start = new Date().getTime(),
			callee = arguments.callee;
			timerId = setTimeout(function () {
				var progress = (new Date().getTime() - start) / 1000;
				E.style.top = ((to - from) * (toTop ? progress : delta(progress)) + from) + "px";
				if (progress < 1)
					timerId = setTimeout(arguments.callee, 13);
				else
					callee(!toTop, toTop ? 0 : 180, toTop ? 180 : 0);
			}, 13);
		};
		go(false, 0, 180);
	};
};
</script>

[dmitriymar]

.animate({
top: "+=180px"
}, 3000,

ты об этом?

[dmitriymar]

запарился-ща гляну -вполне может быть что он код изменил ещё тогда и я не глянув его перепечатал

[x-yuri]

нет, ты же сказал не упоминать jQuery. И ты похоже игнорируешь ссылки "Посмотреть исходный код"... приведу его нескрытым

<div id='foo' style='width: 50px; height: 50px; position: absolute; background: #555555'>
</div>

<script type='text/javascript'>
window.onload = function () {
function delta(progress) {
     function d(progress) {
        for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
           if (progress >= (7 - 4 * a) / 11)
               return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
        }
     }
     return 1 - d(1 - progress);
}

	document.getElementById("foo").onclick = function () {
		var E = this;
		var timerId;
		this.onclick = function(){
			clearTimeout( timerId );   // !!! останавливаем квадрат
		};
		var go = function( toTop, from, to ){
			var start = new Date().getTime(),
			callee = arguments.callee;
			timerId = setTimeout(function () {
				var progress = (new Date().getTime() - start) / 1000;
				E.style.top = ((to - from) * (toTop ? progress : delta(progress)) + from) + "px";
				if (progress < 1)
					timerId = setTimeout(arguments.callee, 13);
				else
					callee(!toTop, toTop ? 0 : 180, toTop ? 180 : 0);
			}, 13);
		};
		go(false, 0, 180);
	};
};
</script>

[x-yuri]

запарился-ща гляну -вполне может быть что он код изменил ещё тогда и я не глянув его перепечатал

теоретически возможно, если бы не одно "но": в этой теме все знают, что анимация делается с помощью setTimeout. Я это гарантирую!!!111

[dmitriymar]

кликни по контейнеру когда он будет двигаться в любую сторону-никакой реакции. кликни по нему два раза подряд-браузер рухнет.код я просматривал-посмотри там за ним коменты-но я в него не вчитывался-смысл если по работе примера видно что он не рабочий-говорю о браузере фф

[dmitriymar]

опять приходим к к тому что такое анимация.простите если я изменение координат контейнера в пространстве организую в цикле(допустим от х=10 до х=50). а реализацию того чтобы это движение было видно полностью а не только начало и конец-реализую введением в тело цикла-прокруткой пустого цикла.это будет не анимация?

[dmitriymar]

теоретически возможно, если бы не одно "но": в этой теме все знают, что анимация делается с помощью setTimeout. Я это гарантирую!!!111

знать то знают -но как реализуют? допуская косяки в построении алгоритма?))) ну я знаю что в ракете есть двигатель-но знание того это недостаточно будет мне(я так думаю) чтобы построить правильно рабочую ракету. -это я абстрактно ответил на то что все знают-но творят глупости