Question

我有一个隐藏的div。通过JavaScript，我取消了隐藏元素。但我想解开div标签，比如'grace'，而不是那么自动。我的意思是风格，用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增加的不透明度。

Demo

Answer 2

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

因此，为了'优雅地'展示你的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>

查看文档：{{3}}

另外，请查看其他jQuery函数，例如http://api.jquery.com/show/，addClass，removeClass以及其他转换/动画函数，例如css，slideDown和{ {3}}。使用jQuery将Javascipt事件添加到HTML元素也很容易。你使用的越多，你就越被迷住。

使用带有'grace'的JavaScript取消隐藏div元素？

2 个答案: