Javascript-форум - Изменение уровня прозрачности блока

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Изменение уровня прозрачности блока (https://javascript.ru/forum/events/37697-izmenenie-urovnya-prozrachnosti-bloka.html)

Изменение уровня прозрачности блока

Здравствуйте!

Хотел реализовать постепенное изменение прозрачности блока, но что-то не выходит :cray:

Имеется следующая функция:

<script>
function setOpacity() {
for(var op=0; op<=1; op=op+0.1) {document.getElementById('big').style.opacity=op;}
</script>

и собственно сам блок:

<div id="big" onClick="setOpacity();">
blah-blah-blah...
</div>

Помогите, пожалуйста, советом, что я делаю не так.:blink:

var op = -1;
function setOpacity() {
  if( op < 10 ) {
    ++op;
    document.getElementById('big').style.opacity=op/10;
    setTimeout( setOpacity, 100 );
  }
}

Все хорошо, но событие при клике происходит только один раз. Все последующие клики не обрабатываются, а надо, чтобы событие повторялось :(

var setOpacity = function() {
  var op, to;
  return function () {
    if( to )
      clearTimeout( to );
    to = null;
    var id = document.getElementById('big');
    op = -1;
    (function _() {
      id.style.opacity = ++op/10;
      if( op < 10 )
        to = setTimeout( _, 100 );
      else
        to = null;
    })();
  }
}();

TRos,
частая ошибка:)

<script>
function setOpacity() {
  var op = 0; 
  setTimeout(function (){
    if (op > 1) return;
    document.getElementById('big').style.opacity=op;
    op+=0.1
    setTimeout (arguments.callee, 100);
    }, 100);
}
</script>

<div id="big" onClick="setOpacity();" style="opacity:0.1">
blah-blah-blah...
</div>

Спасибо, rgl - помогли взглянуть на проблему шире :)
Огромное спасибо, Dim@ - именно то, что нужно! Про условие с таймаутом думал сразу, но почему-то уперся в цикл, думал, что так будет правильнее :)

Проблема решена:thanks:

Цитата:

Сообщение от Dim@ (Сообщение 248771)

TRos,
частая ошибка:)

<script>
function setOpacity() {
  var op = 0; 
  setTimeout(function (){
    if (op > 1) return;
    document.getElementById('big').style.opacity=op;
    op+=0.1
    setTimeout (arguments.callee, 100);
    }, 100);
}
</script>

<div id="big" onClick="setOpacity();" style="opacity:0.1">
blah-blah-blah...
</div>

Если при новом клике цепочку таймаутов от предыдущего клика не прерывать, могут появиться неприятные мелькания, т.к. вызовы от двух кликов начинают бороться друг с другом. Вот ваш же код с небольшим изменением - время увеличено до 10 секунд. Попробуйте кликнуть с интервалом в 3-4 секунды

<script>
function setOpacity() {
  var op = 0; 
  setTimeout(function (){
    if (op > 1) return;
    document.getElementById('big').style.opacity=op;
    op+=0.01 // тут поменял
    setTimeout (arguments.callee, 100);
    }, 100);
}
</script>

<div id="big" onClick="setOpacity();" style="opacity:0.1">
blah-blah-blah...
</div>

rgl,
да я знаю, когда сам игрался с прозрачностью (пару месяцев назад) я видел что это происходит, единственное чего тогда не хватает это флага:

<script>
var flag = true;
function setOpacity() {
  if (flag === false) return;
  flag = false;
  var op = 0;
  setTimeout(function (){
    if (op > 1){
      flag = true;
      return;
    }
    document.getElementById('big').style.opacity=op;
    op+=0.01 // тут поменял
    setTimeout (arguments.callee, 100);
    }, 100);
}
</script>
 
<div id="big" onClick="setOpacity();" style="opacity:0.1">
blah-blah-blah...
</div>