Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.08.2011, 16:25
Аватар для Armen
Кандидат Javascript-наук
Отправить личное сообщение для Armen Посмотреть профиль Найти все сообщения от Armen
 
Регистрация: 28.06.2009
Сообщений: 120

Анимация движения
Здравсвуйте.
Подскажите пожалуйста.
Есть код хтмл
<div id="out" onclick="animate('example', function(p) {return p;})">
	<div id="example">Hello world</div>
</div>

и джаваскрипт
var element = document.getElementById("example");
		var from = 0; // Начальная координата X
		var to = 500; // Конечная координата X
		var duration = 1000; // Длительность - 1 секунда
		var start = new Date().getTime(); // Время старта
		
		var computedStyle = window.getComputedStyle(element, null);
		var style = computedStyle.left;

		setTimeout(function()
				   {
					   var now = (new Date().getTime()) - start; // Текущее время
					   var progress = now / duration; // Прогресс анимации
					   var result = (to - from) * delta(progress) + from;
					   element.style.left = result + "px";
					   
					   if (progress < 1) // Если анимация не закончилась, продолжаем
					   		setTimeout(arguments.callee, 10);
					}, 10);

При клике должна срабатывать анимация, но ничего не работает.
Не могу понять, что не так сделал, подскажите пожалуйста
Ответить с цитированием
  #2 (permalink)  
Старый 02.08.2011, 16:31
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

а где функция delta ?
И вообще смотрите в firebug, он вам многое может рассказать.
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #3 (permalink)  
Старый 02.08.2011, 16:33
Профессор
Отправить личное сообщение для розовый слоник Посмотреть профиль Найти все сообщения от розовый слоник
 
Регистрация: 17.10.2009
Сообщений: 258

а у div'а стоит позишен абсолют?
кстати и одной функции нету
Ответить с цитированием
  #4 (permalink)  
Старый 02.08.2011, 16:34
Аватар для Armen
Кандидат Javascript-наук
Отправить личное сообщение для Armen Посмотреть профиль Найти все сообщения от Armen
 
Регистрация: 28.06.2009
Сообщений: 120

Сообщение от walik Посмотреть сообщение
а где функция delta ?
И вообще смотрите в firebug, он вам многое может рассказать.
Спасибо, это я тупорез, не заметил, что ф-ю пропустил.
Ответить с цитированием
  #5 (permalink)  
Старый 02.08.2011, 16:49
Аватар для Armen
Кандидат Javascript-наук
Отправить личное сообщение для Armen Посмотреть профиль Найти все сообщения от Armen
 
Регистрация: 28.06.2009
Сообщений: 120

У меня теперь в другом проблема, пишу код
<div id="out">
	<div id="example"></div>
</div>

var element = document.getElementById("example");
		var out = document.getElementById("out");
		
		var from = 0; // Начальная координата X
		var to = 500; // Конечная координата X
		var duration = 1000; // Длительность - 1 секунда
		var start = new Date().getTime(); // Время старта
		
		out.onclick = function()
		{
			setTimeout(function()
					   {
						   var now = (new Date().getTime()) - start; // Текущее время
						   var progress = now / duration; 
						   var result = (to - from) * delta(progress) + from;
						   element.style.left = result + "px";
						   
						   if (progress < 1) // Если анимация не закончилась, продолжаем
						   	setTimeout(arguments.callee, 10);
						}, 10);
			
		};			
	

	function delta(progress)
	{
		return progress;
	}

Анимация получается , какая-то "рваная", див стартует резко с половины пути, а если кливать повторно, то див вообще исчезает.
Что не так, подскажите пожалуйста
Ответить с цитированием
  #6 (permalink)  
Старый 02.08.2011, 17:42
Аватар для Armen
Кандидат Javascript-наук
Отправить личное сообщение для Armen Посмотреть профиль Найти все сообщения от Armen
 
Регистрация: 28.06.2009
Сообщений: 120

Уже переписал код
<div class="example_path">
	<div id="example" class="example_block"></div>
</div>

window.onload = function()
	{
		
		
		var element = document.getElementById("example");
		var from = 0; // Начальная координата X
		var to = 500; // Конечная координата X
		var duration = 1000; // Длительность - 1 секунда
		var start = new Date().getTime(); // Время старта
		
		element.onclick = setAnimate
	}
	
	
	function setAnimate()
	{
			setTimeout(function()
				   {
					   var now = (new Date().getTime()) - start; // Текущее время
					   var progress = now / duration; 
					   var result = (to - from) * delta(progress) + from;
					   element.style.left = result + "px";
					   
					   if (progress < 1) // Если анимация не закончилась, продолжаем
					    	setTimeout(arguments.callee, 10);
					}, 10);
					
	}	
	
	function delta(progress)
	{
		return progress;
	};

Все равно не работает, при клике, ничего не срабатывает. Помогите, что не так
Ответить с цитированием
  #7 (permalink)  
Старый 02.08.2011, 18:15
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Armen,
учитесь пользоваться поиском, чтобы не задавать однотипных вопросов
Ответить с цитированием
  #8 (permalink)  
Старый 02.08.2011, 18:20
Аватар для Armen
Кандидат Javascript-наук
Отправить личное сообщение для Armen Посмотреть профиль Найти все сообщения от Armen
 
Регистрация: 28.06.2009
Сообщений: 120

Сообщение от monolithed Посмотреть сообщение
Armen,
учитесь пользоваться поиском, чтобы не задавать однотипных вопросов
ТАм ведь с помощью jQuery ,а мне нужен чистый JS, код ведь уже есть, только не понимаю, почему не работает
На jQuery я это реализовал
Ответить с цитированием
  #9 (permalink)  
Старый 02.08.2011, 18:32
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от Armen
ТАм ведь с помощью jQuery ,а мне нужен чистый JS, код ведь уже есть, только не понимаю, почему не работает
Извините, но вы меня начианаете раздражать.
Там 11 страниц текста, куча кода и теории, и на jQuery всего пара функций в качестве альтернативных примеров решения задачи.
Вы уже два года на форуме в статусе плавающего новичка, если вы не начнете думать, и пытаться хоть немного самостоятельно решать свои микропроблемы, то помогать вам никто не будет.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему нет движения элемента? DZHETIGAPA Элементы интерфейса 14 20.04.2011 11:15
Событие движения мыши GLeBaTi Events/DOM/Window 8 02.03.2011 16:01
Анимация. Помогите понять почему не работает. kadurban jQuery 4 08.07.2010 20:50
анимация движения объекта по прямой YISHIMITSY Элементы интерфейса 6 04.03.2010 15:47
Цикличность анимация? SashaBorandi jQuery 1 25.12.2008 09:20