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>