Сразу к делу,
есть вопрос, если кто подскажет буду очень признателен.
Есть анимация для кнопки выбора в меню, анимация увеличивает paddingBottom и Top
id у каждого свой чтобы потом можно было пройтись по ним циклом и скинуть значения на исходные, при нажатии на другую кнопку, но оно почему-то не работает) и я не совсем могу понять в чем проблема... Сделал вот так:
<html>
<li id="p1" onclick="Animate(this.id)">кнопка 1</li>
<li id="p2" onclick="Animate(this.id)">кнопка 2</li>
<li id="p3" onclick="Animate(this.id)">кнопка 3</li>
<li id="p4" onclick="Animate(this.id)">кнопка 4</li>
<JS>
function Animate(id) {
var element = document.getElementById(id);
var from = 0;
var to = 15;
var duration = 500;
var start = new Date().getTime();
element.style.paddingTop = '0px';
for (var i = 0; i < 100; i++) {
var l = document.getElementById('p' + i);
l.style.paddingBottom = '0px';
l.style.paddingTop = '0px';
l.style.color = '#333';
l.style.backgroundColor = 'white';
}
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = (to - from) * delta(progress) + from;
element.style.paddingBottom = result + '%';
element.style.paddingTop = result + '%';
element.style.color = 'white';
element.style.backgroundColor = '#333';
if (progress < 1)
setTimeout(arguments.callee, 10);
}, 10);
}
//просчет дельты
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);
}
вот она на сайте(
http://javascript.ru/blog/Andrej-Par...cii-JavaScript)
Вот, исправил, по идеи, должно работа в такой последовательности, сначала скинуть стили всех id и потом присвоить стиль данному id который передается в функцию
