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

我有一个隐藏的div。通过JavaScript，我放弃了这个元素。但是我想用'恩典'来解开div标签，而不是那么自动化。我的意思是有型有款，是可能用JavaScript感谢使用JavaScript'grace'取消隐藏div元素？

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; 
}

来源

2013-06-24 ladybug

您可以使用JavaScript JQuery库来执行此操作。你可以用它做动画，只是说（'$ myDiv'）。show（）; ，它将优雅地显示div – PoeHaH

使用CSS转换进行转换。 – rgthree

应该指出的是，CSS转换是CSS3，并非所有转换都适用于所有浏览器 – PoeHaH

基本上，逐步提高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

来源

2013-06-24 13:40:51

+1！谢谢！这正是我正在寻找的。 – ladybug

我认真地建议你尝试的jQuery。它有一个奇妙的动画libarary，非常容易使用。您可以从谷歌或从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>

退房的文档：http://api.jquery.com/show/

此外，检查出其他jQuery的功能，如addClass，removeClass，css，等过渡/动画功能，如slideDown，slideUp和toggle。使用jQuery将Javascipt事件添加到HTML元素也很容易。你越多地使用它，你就会被吸引得越多。

来源

2013-06-24 14:07:36

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

回答

相关问题