使用 JavaScript 和"grace"取消隐藏 div 元素？

Question

我有一个隐藏的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;
}

Answer 1

基本上，在几个间隔内逐渐增加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减少。

演示

Answer 2

我认真建议您尝试jQuery。它有一个奇妙的动画库，非常容易使用。您可以从谷歌或jQuery.com（以及其他公共来源）下载该库：

• http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
• http://code.jquery.com/jquery-latest.min.js

因此，为了"优雅地"显示您的div，首先将jQuery添加到您的页面：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
    type="text/javascript"></script>

然后，你可以创建你的功能：

<script>
    function showMyDiv(){
        $('.readyState').show();  //this grabs all elements using the class ".readyState" and uses the "show" jQuery function
    }
</script>

查看文档：http://api.jquery.com/show/

此外，还可以查看其他jQuery函数，如addClass、removeClass、css，以及其他转换/动画函数，如slideDown、slideUp和toggle。使用jQuery将Javascipt事件添加到HTML元素中也非常容易。你用得越多，你就会越着迷。