Opacity на чистом JS
Добрый день, я новичок, начала изучать 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; } |
NastyaNewer,
https://learn.javascript.ru/js-animation |
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,
мало что понимаю, из того что вы пишите, может вам 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>
|
спасибо
|
| Часовой пояс GMT +3, время: 23:35. |