Эффект непрозрачности работает от 1,0 до 0, но не от 0 до 1,0

Я хотел увеличить непрозрачность div с 0 до 1.0 одним нажатием кнопки. Я могу уменьшить непрозрачность с 1,0 до 0,0, но она не работает с 0,0 до 1,0. Я также пытался использовать parseInt(element.style.opacity) а также parseFloat(element.style.opacity), но ничего из этого тоже не работает. Вот неисправный JavaScript:

function myF(){
var x = document.getElementById("test").style; 
x.opacity = parseFloat(x.opacity) + 0.1;
setTimeout(myF(),10);
}

А вот и неисправный HTML:

<button onclick="myF()">Click to change opacity</button>
<div style="height:200px; width:200px; background-color:#656b67; opacity:0;" id="test">     </div>

(Ниже приведены JavaScript и HTML, которые работают для уменьшения непрозрачности)

<body>
<script>
function myF(){
    var x = document.getElementById("test").style;
    x.opacity = x.opacity - 0.1;
    setTimeout(function(){myF();},10);
}
</script>
<button onclick="myF()">Click to resize</button>
<div style="height:200px; width:200px; background-color:#656b67; opacity:1.0;"     id="test"></div>
</body>
Источник

2 ответа

Решение

+ Изменить

setTimeout(myF(),10);

в

setTimeout(myF, 10);

Вы не хотите немедленно вызывать функцию, вы хотите передать ее setTimeout,

Кроме того, у вас есть бесконечный цикл. Функция вызывается рекурсивно, и нет конечного условия. При немедленном вызове это приведет к зависанию вашего браузера.

Источник 
function myF(){
  var transparent_div = document.getElementById("test");

  var opacity = parseFloat(transparent_div.style.opacity);

  if (isNaN(opacity)) opacity = 0.1;
  else opacity += 0.1;

  transparent_div.style.opacity = opacity;

  if (opacity < 1.0) setTimeout(function(){myF();},100);
}

Если для непрозрачности установлено значение "" пустой строки, вы не будете анализировать число, и поэтому Javascript вернет его в виде объекта NaN, который вы можете проверить на использование isNaN(). Я думаю, что это одна из ваших главных проблем; parseFloat() был правильным для использования, вам просто нужно проверить возвращаемое значение соответственно.

Источник
Другие вопросы по тегам