Div显示隐藏有效
问题描述:
我有隐藏与简单的查询div。 我想在隐藏div时添加效果。Div显示隐藏有效
这里是我的代码
<script type="text/javascript">
function divcustumfldshow() {
var dive = document.getElementById("divcustumfld");
dive.style.display = (dive.style.display == "none") ? "block" : "none";
}
<script>
答
不建议但想法见下文输出,可以进行间隔,可以使不透明度与每个间隔改变。我建议你用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>
答
我看到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/
答
演示 - 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%)
}
答
<div id="divcustumfld">
Your data elements
</div>
好
$('#btn1').click(function(){
$('#divcustumfld').hide();
});
答
如果你想要一个纯粹的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>
隐藏和显示不会给一个效果尝试jQuery的淡入,淡出 – 2014-12-04 12:43:48
你应该'jQuery'库,也就是提供了许多这种类型的功能 – Girish 2014-12-04 12:45:27