This question already has an answer here:
onmouseover onmouseout fadeIn fadeOut no jQuery
(1个答案)
6年前关闭。
我有一个隐藏的div。通过JavaScript,我没有隐藏该元素。但是我想用'grace'来解散div标签,而不是那么自动。我的意思是说风格,JavaScript可能吗?
的HTML
CSS:
javascript:
如果要花费更长的时间,只需将间隔从100开始增加,反之亦然。而且,如果您希望它更平滑,则可以将每步添加的不透明度从0.1降低。
Demo
(1个答案)
6年前关闭。
我有一个隐藏的div。通过JavaScript,我没有隐藏该元素。但是我想用'grace'来解散div标签,而不是那么自动。我的意思是说风格,JavaScript可能吗?
的HTML
<input type="button" value="Unhide" onclick="unhide();"/>
<div class="readystate" id="readystate">
<!-- something here -->
</div>
CSS:
.readystate{
visibilty: hidden;
}
javascript:
function unhide(){
document.getElementById("readystate").style.visibility = "visible";
document.getElementById("readystate").style.display=block;
}
最佳答案
基本上,逐步增加DIV的不透明度,直到完全可见为止,如下所示:
function unhide() {
var el = document.getElementById('readystate'),
opac = 0,
interval = setInterval(function () {
opac += 0.1;
if (opac >= 1) {
clearInterval(interval);
opac = 1;
}
el.style.opacity = opac;
}, 100);
el.style.opacity = 0;
el.style.visibility = 'visible';
}
如果要花费更长的时间,只需将间隔从100开始增加,反之亦然。而且,如果您希望它更平滑,则可以将每步添加的不透明度从0.1降低。
Demo