Div顯示隱藏有效

Question

我有隱藏與簡單的查詢div。 我想在隱藏div時添加效果。

這裏是我的代碼

<script type="text/javascript"> 
     function divcustumfldshow() { 
    var dive = document.getElementById("divcustumfld"); 
    dive.style.display = (dive.style.display == "none") ? "block" : "none"; 
    } 
<script> 

Answer 1

不建議但想法見下文輸出，可以進行間隔，可以使不透明度與每個間隔改變。我建議你用CSS3和jQuery的的效果

var count= 1; 
 
    i = setInterval(function(){ 
 
    divcustumfldshow(count) 
 
    if(count==10) 
 
    clearInterval(i); 
 
else 
 
    count++; 
 
     },200); 
 

 
    function divcustumfldshow(count1) { 
 
     var dive = document.getElementById("divcustumfld"); 
 
     if(count1==10) 
 
     {dive.style.display = "none";} 
 
     else { 
 
     console.log(dive.style.opacity) 
 
     dive.style.opacity = (10-count1)/10; 
 
     } 
 
     }

#divcustumfld{width:200px; 
 
height:200px; 
 
background:red; 
 
opacity:1; 
 
}

<div id="divcustumfld"> 
 
    
 
    
 
    </div>

Answer 2

我看到CSS3的標籤，所以這裏是一個純粹的CSS3例如：

.block { 
    transition: opacity 0.5s linear, transform 0.5s linear; 
    opacity: 1; 
} 

.block.hidden { 
    opacity: 0; 
    transform: scaleY(0); 
} 

這裏的小提琴：http://jsfiddle.net/andunai/1e21endf/

然而，在這種情況下，元素將僅僅消失在視覺上，並且不會釋放它所需的位置，因此您必須最終使該元素具有position: absolute或animage padding，margin和max-height - 注意的height過渡仍然存在問題：How can I transition height: 0; to height: auto; using CSS?

.block { 
    transition: opacity 0.5s linear, transform 0.5s linear, max-height 0.5s linear, padding 0.5s linear; 
    opacity: 1; 
    max-height: 30px; /* This one must be approximately of the 
         height of element, not less */ 
} 

.block.hidden { 
    opacity: 0; 
    max-height: 0; 
    padding: 0; 
    transform: scaleY(0); 
} 

這裏的加入幾乎真實的縮放的例子：http://jsfiddle.net/andunai/1e21endf/1/

Answer 3

演示 - http://jsfiddle.net/thjzgv93/

您可以使用CSS3 opacity隱藏元素

#divcustumfld { 
    opacity:1; 
    transition: .5s linear; 
} 
#divcustumfld.hide { 
    opacity:0; 
} 

，或者您可以使用translate

演示 - http://jsfiddle.net/thjzgv93/1/

#divcustumfld { 
    transition: .5s linear; 
} 
#divcustumfld.hide { 
    transform:translatey(-100%) 
} 

Answer 4

<div id="divcustumfld"> 
     Your data elements 
</div> 

好

$('#btn1').click(function(){ 
    $('#divcustumfld').hide(); 

}）;

http://jsfiddle.net/mynameisvikram/vv0ranzo/

Answer 5

如果你想要一個純粹的CSS3解決淡出，然後立即隱藏，你可以通過設置max-height爲0。您還需要設置overflow:hidden當元素是隱藏的模擬元件的藏身以確保最大高度不受內容影響。

當動畫max-height，您可以通過淡出的時間延遲，並設置動畫時間爲0秒，以保證它的時候淡出已完成立即發生，反之亦然上顯示：

function divcustumfldshow() { 
 
    var dive = document.getElementById("divcustumfld"); 
 
    // toggle the class name - this will need to be more inteligent if it has multiple classes 
 
    dive.className = dive.className ? '' : 'hidden'; 
 
}

#divcustumfld { 
 
    transition: opacity 2s linear, max-height 0s linear 0s; 
 
    opacity: 1; 
 
    background: red; 
 
    max-height:100%; 
 
} 
 

 
#divcustumfld.hidden { 
 
    opacity: 0; 
 
    transition: opacity 2s linear, max-height 0s linear 2s; 
 
    max-height: 0; 
 
    overflow:hidden; 
 
}

<button onclick="divcustumfldshow()">Click</button> 
 
<div id="divcustumfld">Foo<br/>Bar</div> 
 
<div>Blah blah</div>