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

[TRos]

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

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

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

<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>

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

[rgl]

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

[TRos]

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

[rgl]

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;
    })();
  }
}();

[Dim@]

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>

[TRos]

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

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

[rgl]

<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>

[Dim@]

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>