使用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元素？

回答

相關問題