This question already has an answer here:
onmouseover onmouseout fadeIn fadeOut no jQuery
                            
                                (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

10-05 20:54
查看更多