Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   уменьшение opacity работает, увеличение - не работает (https://javascript.ru/forum/misc/18105-umenshenie-opacity-rabotaet-uvelichenie-ne-rabotaet.html)

Polkan 17.06.2011 12:36

уменьшение opacity работает, увеличение - не работает
 
Здравствуйте.
Простейший пример, не понимаю в чем разница ведь меняю только минут на плюс... :blink:

так работает (непрозрачность уменьшается)
<html><head><title></title></head>
<body>
<script>
window.onload=function(){
  obj = document.getElementById("li_1");
  obj.style.opacity = 1;
  while (obj.style.opacity > 0 ) {
    alert("opacity = "+obj.style.opacity);
    obj.style.opacity = obj.style.opacity - 0.2;
  }
}
</script>

  <ul class="slider" id="idSlider">
    <li id="li_1"><div style="width:100px;height:100px;background-color:red;"></div></li>
  </ul>
</body>
</html>


а так не работает (срабатывает только первый шаг увеличения)
<html><head><title></title></head>
<body>
<script>
window.onload=function(){
  obj = document.getElementById("li_1");
  obj.style.opacity = 0;
  while (obj.style.opacity < 1 ) {
    alert("opacity = "+obj.style.opacity);
    obj.style.opacity = obj.style.opacity + 0.2;
  }
}
</script>

  <ul class="slider" id="idSlider">
    <li id="li_1"><div style="width:100px;height:100px;background-color:red;"></div></li>
  </ul>
</body>
</html>

Kolyaj 17.06.2011 12:38

Минус приводит строку к числу, а плюс конкатенирует строки.

ksa 17.06.2011 12:42

Пробуем так

<html><head><title></title></head>
<body>
<script>
window.onload=function(){
  obj = document.getElementById("li_1");
  obj.style.opacity = 0;
  while (obj.style.opacity < 1 ) {
    alert("opacity = "+obj.style.opacity);
    obj.style.opacity = +obj.style.opacity + 0.2;
  }
}
</script>

  <ul class="slider" id="idSlider">
    <li id="li_1"><div style="width:100px;height:100px;background-color:red;"></div></li>
  </ul>
</body>
</html>

Polkan 17.06.2011 12:43

но если пишу
obj.style.opacity = parseInt(obj.style.opacity) + 0.2;
то тоже не работает

ksa 17.06.2011 12:44

Polkan, мой вариант работает (смотрел в Опере)...

Polkan 17.06.2011 12:45

ksa, спасибо!
а что означает такая запись? +obj.style.opacity

dmitriymar 17.06.2011 12:47

Цитата:

Сообщение от Polkan
while (obj.style.opacity < 1 )

obj.style.opacity-строка . и строка сравнивается с единицей. не во всех браузерах пройдёт- приходилось в старых явно приводить к числовому типу

Polkan 17.06.2011 12:49

dmitriymar, спасибо, добавлю на всякий случай parseInt в сравнение, хотя оно и так работает

dmitriymar 17.06.2011 12:50

Цитата:

Сообщение от Polkan
parseInt

не пройдёт)
parseFloat
и не только в сравнение но и в добавление. поскольку там где циклы не проскочит-и дальше будет работать как со строкой

Polkan 17.06.2011 12:53

dmitriymar, ага, спасибо!


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