javascript - 使用带有'grace'的JavaScript取消隐藏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

我认真地建议你试试 jQuery。它有一个很棒的动画库，非常容易使用。您可以从 Google 或 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 元素也非常容易。你用得越多，你就会越上瘾。

Answer 2

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

演示