Форум

NastyaNewer · #1 (**permalink**) 06.04.2018, 23:22

Добрый день, я новичок, начала изучать JS недавно, вопрос к знатокам. Знаю, что эта тема поднималась здесь и на просторах интернета многократно. НО проштудировав много статей у меня никак не получилось сделать плавное появление блока. Скажите пожалуйста где у меня ошибка. Блок <div id="box" onMouseUp="function setOpacity()"> код в js function setOpacity() {
for(var op=0.2; op<=1; op=op+0.1) {document.getElementById('box').style.opacity=op;
}

рони · #2 (**permalink**) 06.04.2018, 23:26

NastyaNewer,
https://learn.javascript.ru/js-animation

рони · #3 (**permalink**) 06.04.2018, 23:52

NastyaNewer,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>

</head>

<body>
<div id="box"></div>
<style type="text/css">
      #box{
           border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
           background-color: #0000CD;
           opacity: 0.2;
      }

    </style>

<script>
  var timer;
  box.addEventListener('mouseup', function() {
  window.clearTimeout(timer);
  var op = 20;
  function anim(duration) {
  box.style.opacity = ++op/100;
  if(op < 100) timer = setTimeout(anim, duration, duration);
  }
  anim(25)
  });
</script>

</body>

</html>

NastyaNewer · #4 (**permalink**) 06.04.2018, 23:59

спасибо большое рони, за отклик и помощь, но у меня и твое не работает. Эх....

j0hnik · #5 (**permalink**) 07.04.2018, 00:35

Сообщение от NastyaNewer

Мне нужно настроить событие: после нажатия на кнопку запускается другой блок плавно от прозрачного к непрозрачному. Какое лучше выбрать событие тогда?

событие click вам наверняка подойдет

рони · #6 (**permalink**) 07.04.2018, 00:57

NastyaNewer,
мало что понимаю, из того что вы пишите, может вам css будет достаточно.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>

</head>

<body>
<div id="box"></div>
<style type="text/css">
      #box{
           border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
           background-color: #0000CD;
           opacity: 1;
           transition: 1s 1s;
      }
     #box.hide  {
       opacity: 0
     }

    </style>

<script>
   window.setTimeout(function() {
         box.classList.add("hide")
    });

</script>

</body>

</html>

NastyaNewer · #7 (**permalink**) 07.04.2018, 01:17

спасибо

Форум

Справочник

Discord чат

Курсы javascript