Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.05.2013, 17:21
Интересующийся
Отправить личное сообщение для TRos Посмотреть профиль Найти все сообщения от TRos
 
Регистрация: 10.04.2012
Сообщений: 25

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

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

Имеется следующая функция:
<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>


Помогите, пожалуйста, советом, что я делаю не так.
Ответить с цитированием
  #2 (permalink)  
Старый 02.05.2013, 17:37
Аватар для rgl
rgl rgl вне форума
Профессор
Отправить личное сообщение для rgl Посмотреть профиль Найти все сообщения от rgl
 
Регистрация: 28.02.2011
Сообщений: 337

var op = -1;
function setOpacity() {
  if( op < 10 ) {
    ++op;
    document.getElementById('big').style.opacity=op/10;
    setTimeout( setOpacity, 100 );
  }
}
Ответить с цитированием
  #3 (permalink)  
Старый 02.05.2013, 17:58
Интересующийся
Отправить личное сообщение для TRos Посмотреть профиль Найти все сообщения от TRos
 
Регистрация: 10.04.2012
Сообщений: 25

Все хорошо, но событие при клике происходит только один раз. Все последующие клики не обрабатываются, а надо, чтобы событие повторялось
Ответить с цитированием
  #4 (permalink)  
Старый 02.05.2013, 18:18
Аватар для rgl
rgl rgl вне форума
Профессор
Отправить личное сообщение для rgl Посмотреть профиль Найти все сообщения от rgl
 
Регистрация: 28.02.2011
Сообщений: 337

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;
    })();
  }
}();
Ответить с цитированием
  #5 (permalink)  
Старый 02.05.2013, 20:51
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

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>
Ответить с цитированием
  #6 (permalink)  
Старый 02.05.2013, 23:23
Интересующийся
Отправить личное сообщение для TRos Посмотреть профиль Найти все сообщения от TRos
 
Регистрация: 10.04.2012
Сообщений: 25

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

Проблема решена
Ответить с цитированием
  #7 (permalink)  
Старый 03.05.2013, 10:55
Аватар для rgl
rgl rgl вне форума
Профессор
Отправить личное сообщение для rgl Посмотреть профиль Найти все сообщения от rgl
 
Регистрация: 28.02.2011
Сообщений: 337

Сообщение от 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>
Если при новом клике цепочку таймаутов от предыдущего клика не прерывать, могут появиться неприятные мелькания, т.к. вызовы от двух кликов начинают бороться друг с другом. Вот ваш же код с небольшим изменением - время увеличено до 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>
Ответить с цитированием
  #8 (permalink)  
Старый 03.05.2013, 11:57
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение свойств одного блока при наведении курсора на другой latter-day Events/DOM/Window 4 01.04.2013 18:35
Изменение длинны блока при заполнении Axios Элементы интерфейса 6 27.01.2012 14:56
плавное изменение размера блока alexk984 jQuery 4 29.11.2010 08:46
Изменение одного блока относительно другого Domain Общие вопросы Javascript 9 10.04.2010 15:56
Изменение размера блока реклама в зависимости от разрешения экрана. toxiz77 Общие вопросы Javascript 3 11.02.2009 14:12