JavaScript: Set Interval работает только один раз?

Я пытаюсь сделать кнопку показать вернуть тег h1, но он останавливается после достигающего непрозрачности: 0,1 вместо того, чтобы продолжать вплоть до непрозрачности: 1.JavaScript: Set Interval работает только один раз?

Я попытался отладки на Firebug в течение нескольких часов, но не могу взломать его. Пожалуйста помоги.

<!DOCTYPE html> 
<html> 
<head> 
<title>Flesh and Bone</title> 
</head> 
<body> 
<h1>Flesh and Bone</h1> 
<button id="fade">Fade</button> 
<button id="show">Bring Back</button> 
<h2>The Killers</h2> 
<script> 
    var el = document.querySelector("h1"); 
    var fade = document.getElementById("fade"); 
    var show = document.getElementById("show"); 
    var fader = function() { 
     el.style.opacity = 1; 
     var timer = setInterval(function(){ 
      el.style.opacity -= 0.1; 
      if (el.style.opacity == 0) { 
       clearInterval(timer); 
      } 
     }, 40); 
    } 
    var shower = function() { 
     el.style.opacity = 0; 
     var timer = setInterval(function(){ 
      el.style.opacity += 0.1; 
      if (el.style.opacity == 1) { 
       clearInterval(timer); 
      } 
     }, 40); 
    } 
    fade.onclick = fader; 
    show.onclick = shower; 
</script> 
</body> 
</html>

источник

2013-07-27 Anonymous

Почему бы просто не использовать '.animate' или 'fadeTo'? –

@BradChristie В этом вопросе нет jQuery. – Jivings

@ Jivings: Я знаю, просто немного смешно со всеми вопросами jQuery на досках. Наверное, трудно измерить границы. –

Это связано с поведением арифметики с плавающей запятой. Это объясняется in this question. Прозрачность никогда не достигает 0, поэтому таймер никогда не очищается.

Решение использовать toFixed(1), когда вы выполняете ваше вычитание и сложение:

var timer = setInterval(function(){ 
     el.style.opacity = (el.style.opacity - 0.1).toFixed(1); 
     if (el.style.opacity == 0) { 
      clearInterval(timer); 
     } 
    }, 40);

JSfiddle пример здесь: http://jsfiddle.net/28XNK/2/

источник

2013-07-27 21:26:18 Jivings

Несколько вещей, которые способствуют этому:

el.style.opacity всегда String, поэтому += будет конкатенировать, а не добавлять. Сохраняйте непрозрачность в отдельной переменной, чтобы она оставалась Number.
Номера aren't so precise относительно == 1 или == 0 точно в конце. Вместо этого используйте >= 1 и <= 0.

var fader = function() { 
    var opacity = 1; 
    el.style.opacity = opacity; 
    var timer = setInterval(function() { 
     opacity -= 0.1; 
     el.style.opacity = Math.max(opacity, 0); 
     if (opacity <= 0) { 
      clearInterval(timer); 
     } 
    }, 40); 
}

http://jsfiddle.net/qBgJY/

источник

2013-07-27 21:28:35

непрозрачности является строковое свойство, так что вам нужно, чтобы преобразовать его плавать, чтобы изменить его:

el.style.opacity = parseFloat(el.style.opacity) + 0.1;

источник

2013-07-27 21:31:34

JavaScript: Set Interval работает только один раз?

ответ

Смежные вопросы