плавное появление элемента javascript

225

02 сентября 2018, 04:20

Пытаюсь на JS сделать плавное появление элемента, но что-то не работает. opacity ставится на 0.1 и все, дальше не идет.

<div id="hidden">HIDDEN TEXT</div>
<div id="show" onclick="return show('hidden', 50);">SHOW</div>
<div id="hide">HIDE</div>
<script type="text/javascript">
function show(id, speed) {
    var ID = setInterval(function() {
    if (document.getElementById(id).style.opacity>1) {
clearInterval(ID);
    }
document.getElementById(id).style.opacity += 0.1;
    }, speed);
}
</script>

Answer 1

Пример

var btn = document.querySelector('.btn'); 
var blockHidden = document.querySelector('.block'); 
 
function showBlock() { 
 
  blockHidden.classList.add('b-show'); 
 
} 
btn.addEventListener('click', showBlock);

.block { 
  display: none; 
} 
 
.b-show { 
  display: block; 
  animation: showBlock 1s linear forwards; 
} 
 
@keyframes showBlock { 
  0% { 
    opacity: 0; 
  } 
  100% { 
    opacity: 1; 
  } 
}

<div class="block">Hidden block</div> 
<button class="btn">Button</button>

Answer 2

Дело в том, что значение атрибута style.opacity текстовое. После выполнения style.opacity += 0.1 оно станет равно "0.10.1" и будет проигнорировано при попытке присвоить его атрибуту. Функция show будет вызываться бесконечно, но не будет ничего делать. Исправить просто:

function fadeIn(el, speed) { 
  var step = 1 / speed; 
  var interval = setInterval(function() { 
    if (+el.style.opacity >= 1) 
      clearInterval(interval); 
       
    el.style.opacity = +div.style.opacity + step; 
  }, speed / 1000); 
} 
 
var div = document.getElementById("some-div") 
var button = document.getElementById("switch"); 
 
button.addEventListener('click', function(event) { 
  fadeIn(div, 300); 
});

#some-div { 
  opacity: 0; 
}

<div id="some-div">HIDDEN TEXT</div> 
<button id="switch">Показать</button>

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Разделение массива на два новых javascript

Дан массив ["Banana", "Cherry", "Melon", "Strawberry"]Необходимо отсортировать его и в два новых массива добавить значения: ягоды в массив "berrys", все остальные...

214

javascript