Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   анимация, возврат значений в исходное положение (https://javascript.ru/forum/dom-window/41040-animaciya-vozvrat-znachenijj-v-iskhodnoe-polozhenie.html)

pumaone 29.08.2013 12:01

анимация, возврат значений в исходное положение
 
Сразу к делу,
есть вопрос, если кто подскажет буду очень признателен.
Есть анимация для кнопки выбора в меню, анимация увеличивает 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 который передается в функцию

rekzi 29.08.2013 12:57

Оформите для начала все на jsfiddle.net или на аналогичном ресурсе. Чтоб все зашли и сразу увидели, что за проблема. В легкую подправили бы и дали ответ. И в статье все подробно описано, читайте. Кстати есть раздел "Работа" на этом форуме.

рони 29.08.2013 13:19

Цитата:

Сообщение от pumaone
var l = document.getElementById('p' + i);

откуда здесь i ??????

pumaone 29.08.2013 14:31

Исправил,
если кому интересно:

попался на самом очевидном, общее количество кнопок 78; если без '.length', то:
цыкл:
wrong: (var i = 0; i < 78; i++)

correctly: (var i = 1; i < 79; i++)
двоеточие это не метка, просто для наглядности.


Часовой пояс GMT +3, время: 15:26.