1

Пытаюсь на 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>
2
  • 1
    А зачем вам так делать ? Так то обычно плавное появление делается при помощи transition в css
    – Hikikomori
    12 июл 2018 в 12:22
  • добавьте класс, с помощью которого задаете анимацию появления
    – soledar10
    12 июл 2018 в 14:32

3 ответа 3

3

Пример

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>

0

Дело в том, что значение атрибута 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>

0

Да и так все работает)

document.getElementById("content").style.opacity=0;
show("content",100);
                    
function show(id, speed) { let vars;
var ID = setInterval(function() { 
(vars=Number(document.getElementById(id).style.opacity));
if (vars>1) {
clearInterval(ID);
}
vars += 0.1; document.getElementById(id).style.opacity=vars;
}, speed);
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки