анимация, возврат значений в исходное положение
Сразу к делу,
есть вопрос, если кто подскажет буду очень признателен. Есть анимация для кнопки выбора в меню, анимация увеличивает 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 который передается в функцию |
Оформите для начала все на jsfiddle.net или на аналогичном ресурсе. Чтоб все зашли и сразу увидели, что за проблема. В легкую подправили бы и дали ответ. И в статье все подробно описано, читайте. Кстати есть раздел "Работа" на этом форуме.
|
Цитата:
|
Исправил,
если кому интересно: попался на самом очевидном, общее количество кнопок 78; если без '.length', то: цыкл: wrong: (var i = 0; i < 78; i++) correctly: (var i = 1; i < 79; i++) двоеточие это не метка, просто для наглядности. |
Часовой пояс GMT +3, время: 15:26. |