![](/img/trans.png)
[英]How to add a fade effect to this JavaScript that hides the navbar on scroll?
[英]Add fade effect to javascript that shows and hides divs?
我目前正在使用此javascript显示一个div并隐藏所有其他div。 效果很好。 但是,我想在div显示时和另一个消失时添加淡入淡出效果。
var divState = {};
function showhide(id) {
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
//close others
for (var div in divState) {
if (divState[div] && div != id) {
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
}
这是起作用的jsfiddle。 http://jsfiddle.net/8e8sH/2/
任何帮助将不胜感激。 谢谢。
我会像这样的jsFiddle示例
HTML
<a href="#" data-box="box1">Box 1</a>
<a href="#" data-box="box2">Box 2</a>
<a href="#" data-box="box3">Box 3</a>
<a href="#" data-box="box4">Box 4</a>
<div id="hiddendivs">
<div id="box1" class="box_1">Box 1 Test</div>
<div id="box2" class="box_2">Box 2 Test</div>
<div id="box3" class="box_3">Box 3 Test</div>
<div id="box4" class="box_4">Box 4 Test</div>
</div>
CSS
#hiddendivs > div {
display:none;
position:absolute;
}
#hiddendivs {
position:relative;
}
.box_1 {
width:200px;
height:200px;
font-weight:bold;
background-color:#FF0000;
border:1px solid #000000;
}
.box_2 {
width:200px;
height:200px;
font-weight:bold;
background-color:#6699FF;
border:1px solid #000000;
}
.box_3 {
width:200px;
height:200px;
font-weight:bold;
background-color:#FFFF00;
border:1px solid #000000;
}
.box_4 {
width:200px;
height:200px;
font-weight:bold;
background-color:#00CC99;
border:1px solid #000000;
}
jQuery的
$('a').click(function (e) {
e.preventDefault();
$('#hiddendivs div').not($('#'+$(this).data("box"))).fadeOut();
$('#' + $(this).data("box")).fadeToggle();
})
顺便说一句,可以进一步简化CSS。
值得您花时间阅读jQuery API文档 。 总共需要1-2个小时,并能获得丰厚的回报。
在这种情况下,请使用对jQuery的fadeIn
和fadeOut
调用来替换对style.display
的分配。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.