| |
|
|
| | Здравствуйте, уважаемые программисты!
Позвольте отнять у Вас немного времени, мне нужна Ваша помощь.
Излагаю суть моей проблемы.
Задача:
Есть список UL. Нужно чтобы этот список постепенно проявлялся, т.е. постепенно менял прозрачность от невидимого до видимого.
Мой код:
Написал функцию, которая прибавляет к существующей прозрачности (свойству opacity) списка UL значение 0.1, чтобы относительно медленно все это дело проявлялось. Заставляю выполняться мою функцию несколько раз с помощью функции setInterval(), но выполняется она только 1 раз. Дальше прозрачность не прибавляется. Вопрос думаю Вам понятен.
"Помогите чем можете, подайте на храм" (с) ... =)
Код...
<html>
<head>
<title></title>
<style>
ul.menu {
list-style:none;
display:block;
opacity:0;
border:1px solid #7777cc;
width:150px;
}
</style>
</head>
<body>
<ul id="menu" class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
<script type="text/javascript">
var inVal;
function opa()
{
var ul = document.getElementById('menu');
var sel = window.getComputedStyle(ul, "");
var o = sel.getPropertyValue("opacity");
ul.style.opacity = o;
ul.style.opacity = ul.style.opacity + 0.1;
if (ul.style.opacity > 1) {
ul.style.opacity = 1;
clearInterval(inVal);
}
}
inVal = setInterval('opa()', 10);
</script>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: SilentChild
(03.06.2011 в 11:50)
| | | Первое что можно сказать, функция у вас выполняется бесконечно, дело не в отсутствии её вызовов. | |
| |
|
|
| |
|
|
| |
для: SilentChild
(03.06.2011 в 11:50)
| | | Я бы изменил вашу функцию следующим образом
function opa()
{
var ul = document.getElementById('menu');
if(ul.style.opacity == "")
{
var sel = window.getComputedStyle(ul, "");
var o = sel.getPropertyValue("opacity");
ul.style.opacity = o;
}
ul.style.opacity = String(parseFloat(ul.style.opacity) + 0.1);
if (parseFloat(ul.style.opacity) >= 1) {
ul.style.opacity = 1;
clearInterval(inVal);
}
}
|
| |
| |
|
|
| |
|
|
| |
для: cheops
(03.06.2011 в 12:29)
| | | Вот этот код...
if (ul.style.opacity == "") {}
|
...он ведь ни на что не влияет? Просто правило хорошего тона, как я понимаю? Этот код нужен чтобы не заставлять программу много раз вытаскивать свойство opacity методом getComputedStyle? Но что если без него? Ведь хуже от этого работать не станет, правда? Только время излишнее будет затрачиваться без этого кода, я правильно понял?
Получается, у меня не работало из-за того, что я не привёл получаемое значение свойства из строкового типа в тип с плавающей точкой:
parseFloat(ul.style.opacity)
|
т.е. он у меня прибавлял:
1 раз: "0" + 0.1, что в результате равнялось строке "0.1"
2 раз: "0.1" + 0.1, что в результате равнялось строке "0.10.1" и вот тут-то он и не понимал, что это за казилябра, правильно? И поэтому не работало?
Обязательно ли в строковый тип приводить результат суммы, ведь работает и без приведения к строковому типу? Или это все то же правило хорошего тона? | |
| |
|
|
| |
|
|
| |
для: SilentChild
(03.06.2011 в 14:43)
| | | Не совсем так, у вас значение прозрачности не изменялось, т.е. на каждой итерации у вас оставалось 0.1, проверка ul.style.opacity == "" не просто правило хорошего тона, она позволяет вытащить прозрачность при помощи getComputedStyle() лишь один раз, не обнуляя на каждой итерации значение ul.style.opacity.
А вот parseFloat() пожалуй не обязательно, тем более внизу сообщают, что это очень медленная операция, хотя крайне желательно, пусть другими средствами проконтролировать, чтобы 0.1 у вас случайно не преобразовалось в "0.1" и не началось что-то вроде этого "0.10.10.1...", что может быть очень вероятным, учитывая, что typeof ul.style.opacity у меня например возвращает string. | |
| |
|
|
| |
|
|
| |
для: cheops
(03.06.2011 в 15:31)
| | | Без parseFloat() у меня никак не работает. Ни в вашей вариации кода, ни в моей. Как добавляю parseFloat(), так сразу все работает. Видимо это и есть ключевой момент в данной проблеме. | |
| |
|
|
| |
|
|
| |
для: SilentChild
(04.06.2011 в 00:03)
| | | Скорее всего воспроизводится ситуация, о которой я говорил. ul.style.opacity - это строка, если к ней прибавлять что-то при помощи оператора +, то вместо сложения, будет осуществляться конкотация, объединение строк и генерация последовательности "0.10.10.10.1...", поэтому перед использованием оператора + её явно нужно приводить к типу float/number. | |
| |
|
|
| |
|
|
| |
для: cheops
(04.06.2011 в 00:30)
| | | Признателен Вам за ответ, очень помогли! | |
| |
|
|
| |
автор: 0987654 (03.06.2011 в 12:53) |
|
| |
для: SilentChild
(03.06.2011 в 11:50)
| | | 1. "Постепенность" при тайм-ауте 10 миллисекунд - она глазу совершенно незаметна.
Установите, например, одну секунду - тогда хоть что-то увидите: inVal = setInterval('opa()', 1000);
2. В MSIE данный скрипт работать не будет. Посмотрите кроссбраузерную реализацию здесь в теме id_theme=69967 | |
| |
|
|
| |
|
|
| |
для: 0987654
(03.06.2011 в 12:53)
| | | Спасибо, тему обязательно посмотрю. | |
| |
|
|
