02.08.2011, 16:25
|
|
Кандидат Javascript-наук
|
|
Регистрация: 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);
При клике должна срабатывать анимация, но ничего не работает.
Не могу понять, что не так сделал, подскажите пожалуйста
|
|
02.08.2011, 16:31
|
|
Профессор
|
|
Регистрация: 09.11.2009
Сообщений: 1,101
|
|
а где функция delta ?
И вообще смотрите в firebug, он вам многое может рассказать.
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
|
|
02.08.2011, 16:33
|
Профессор
|
|
Регистрация: 17.10.2009
Сообщений: 258
|
|
а у div'а стоит позишен абсолют?
кстати и одной функции нету
|
|
02.08.2011, 16:34
|
|
Кандидат Javascript-наук
|
|
Регистрация: 28.06.2009
Сообщений: 120
|
|
Сообщение от walik
|
а где функция delta ?
И вообще смотрите в firebug, он вам многое может рассказать.
|
Спасибо, это я тупорез, не заметил, что ф-ю пропустил.
|
|
02.08.2011, 16:49
|
|
Кандидат Javascript-наук
|
|
Регистрация: 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;
}
Анимация получается , какая-то "рваная", див стартует резко с половины пути, а если кливать повторно, то див вообще исчезает.
Что не так, подскажите пожалуйста
|
|
02.08.2011, 17:42
|
|
Кандидат Javascript-наук
|
|
Регистрация: 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;
};
Все равно не работает, при клике, ничего не срабатывает. Помогите, что не так
|
|
02.08.2011, 18:15
|
Особый гость
|
|
Регистрация: 02.04.2010
Сообщений: 4,260
|
|
Armen,
учитесь пользоваться поиском, чтобы не задавать однотипных вопросов
|
|
02.08.2011, 18:20
|
|
Кандидат Javascript-наук
|
|
Регистрация: 28.06.2009
Сообщений: 120
|
|
Сообщение от monolithed
|
Armen,
учитесь пользоваться поиском, чтобы не задавать однотипных вопросов
|
ТАм ведь с помощью jQuery ,а мне нужен чистый JS, код ведь уже есть, только не понимаю, почему не работает
На jQuery я это реализовал
|
|
02.08.2011, 18:32
|
Особый гость
|
|
Регистрация: 02.04.2010
Сообщений: 4,260
|
|
Сообщение от Armen
|
ТАм ведь с помощью jQuery ,а мне нужен чистый JS, код ведь уже есть, только не понимаю, почему не работает
|
Извините, но вы меня начианаете раздражать.
Там 11 страниц текста, куча кода и теории, и на jQuery всего пара функций в качестве альтернативных примеров решения задачи.
Вы уже два года на форуме в статусе плавающего новичка, если вы не начнете думать, и пытаться хоть немного самостоятельно решать свои микропроблемы, то помогать вам никто не будет.
|
|
|
|