向显示和隐藏div的javascript添加淡入淡出效果?
我目前正在使用此javascript显示一个div并隐藏所有其他div。它工作得很好。但是,我想在div显示和另一个消失时添加淡入效果向显示和隐藏div的javascript添加淡入淡出效果?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我目前正在使用此javascript显示一个div并隐藏所有其他div。它工作得很好。但是,我想在div显示和另一个消失时添加淡入效果 var divState = {}; function showhide(id) { if (document.getElementById) { var divid = document.getElementById(id); divState[id] = (divState[id]) ? false : true; //close o
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');
}
}
下面是正在运行的JSFIDLE
任何帮助都将不胜感激。谢谢 您能使用jquery吗?如果是这样的话,那就简单多了
$('#divid1').fadeIn();
$('#divid2').fadeOut();
您还可以包含一个参数,表示您希望使用多长时间。这是值得您花时间阅读的。它总共需要1-2个小时,并支付了巨额红利 在这种情况下,用对jQuery的fadeIn和fadeOut的调用替换对style.display的分配。我会这样做 HTML jQuery
另外,CSS可以进一步简化。我会使用我是jquery新手,这是我要添加到现有javascript中的东西吗?或者这需要我使用完全不同的东西吗?我不想失去我现有的任何功能,只需添加效果即可。jquery最棒的地方在于它只是纯javascript!因此javascript和jquery可以并排共存。只要在html文件的顶部包含jquery,就可以开始使用它的功能了。$'divid1'是一个快捷方式,用于选择id=divid1的元素,并为其提供一系列功能,如淡入淡出。下面是要包含在html顶部的代码片段:我喜欢这个,而且看起来效果不错。但是,与我最初的示例不同的是,当单击Box 1链接时,该框显示出来,但当再次单击同一链接时,该框消失。而在您的示例中,框只在第二次单击时重新显示。在您的示例中,有没有一种方法可以让框在第二次单击时消失?是的,这非常有效!我会看看是否能在我的页面上实现。谢谢你的帮助!
<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>
#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;
}
$('a').click(function (e) {
e.preventDefault();
$('#hiddendivs div').not($('#'+$(this).data("box"))).fadeOut();
$('#' + $(this).data("box")).fadeToggle();
})