分隔器渐入渐出
分隔器渐入渐出
提问于 2015-06-19 12:08:53
我有一个由7个元素组成的菜单。每当单击一个元素时，它的内容就会以淡入的方式出现。如果单击另一个元素，则当前内容淡出，新内容淡入。我将这一概念应用于菜单中的7个元素中的3个，但我面临两个问题：( 1) A没有褪色，在进入和退出中存在一个时间问题，其中一个内容可能与另一个内容发生冲突。有什么帮助吗？
HTML：
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1"onclick="checklist(this)"><button >A</button></li>
<li id="item2"><button >B</button></li>
<li id="item3"><button >C </button></li>
<li id="item4"><button>D </button></li>
<li id="item5"><button>E </button></li>
<li id="item6"><button>F </button></li>
<li id="item7"><button>G </button></li>
<!-- <li> <input type="button" value="animation" OnClick="checklist(this)"> </input>
</li>-->
</ul>
</div>
<div id="first">
<img id="image1" src="http://placehold.it/350x150"/>
<img id="image2" src="http://placehold.it/350x150"/>
<img id="image3" src="http://placehold.it/350x150"/>
<img id="image4" src="http://placehold.it/350x150"/>
<img id="image5" src="http://placehold.it/350x150"/>
<img id="image6" src="http://placehold.it/350x150"/>
<img id="image7" src="http://placehold.it/350x150"/>
<img id="image8" src="http://placehold.it/350x150"/>
<img id="image9" src="http://placehold.it/350x150"/>
<img id="image10"src="http://placehold.it/350x150"/>
</div>
<div id="second">
<img id="image1" src="http://placehold.it/350x150"/>
<img id="image2" src="http://placehold.it/350x150"/>
<img id="image3" src="http://placehold.it/350x150"/>
<img id="image4" src="http://placehold.it/350x150"/>
<img id="image5" src="http://placehold.it/350x150"/>
<img id="image6" src="http://placehold.it/350x150"/>
<img id="image7" src="http://placehold.it/350x150"/>
<img id="image8" src="http://placehold.it/350x150"/>
<img id="image9" src="http://placehold.it/350x150"/>
<img id="image10"src="http://placehold.it/350x150"/>
</div>
<div id="third">
<img id="image1" src="http://placehold.it/350x150"/>
<img id="image2" src="http://placehold.it/350x150"/>
<img id="image3" src="http://placehold.it/350x150"/>
<img id="image4" src="http://placehold.it/350x150"/>
<img id="image5" src="http://placehold.it/350x150"/>
<img id="image6" src="http://placehold.it/350x150"/>
<img id="image7" src="http://placehold.it/350x150"/>
<img id="image8" src="http://placehold.it/350x150"/>
<img id="image9" src="http://placehold.it/350x150"/>
<img id="image10"src="http://placehold.it/350x150"/>
</div>CSS：
#first
{
display: none;
width: 50%;
height: 220px;
margin:auto;
padding-left: 150px;
margin-top: -215px;
}
#first img
{
height: 100px;
width: 100px;
float:left;
margin-right: 5%;
cursor: pointer;
}
#second
{
display: none;
width: 50%;
height: 220px;
margin:auto;
padding-left: 150px;
margin-top: -215px;
}
#second img
{
height: 100px;
width: 100px;
float:left;
margin-right: 5%;
cursor: pointer;
}
#third
{
display: none;
width: 50%;
height: 220px;
margin:auto;
padding-left: 150px;
margin-top: -215px;
}
#third img
{
height: 100px;
width: 100px;
float:left;
margin-right: 5%;
cursor: pointer;
}
li{
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 180px;
text-align:right;
border-style: none;
}
.menu{
width:150px;
height: 350px;
}
.menu li{
position: relative;
top:150px;
bottom: 0;
left: 695px;
right:0;
margin: auto;
border-style:none;
}JQUERY：
$(document).on('click','#item1', function()
{
$("#second. #third").fadeOut(2000, function(){
$("#first").fadeIn(6000);
});
});
$(document).on('click','#item2', function()
{
$("#first, #third").fadeOut(2000, function(){
$("#second").fadeIn(6000);
});
});
$(document).on('click','#item3', function()
{
$("#first, #second").fadeOut(2000, function(){
$("#third").fadeIn(6000);
});
});JSFIDDLE：http://jsfiddle.net/ktyxr77y/
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-06-19 12:31:59
这里有一点不同的方法，可以更可扩展：JS Fiddle
此外，为了提供真正的fadeIn/fadeOut交叉淡出，您可以在包装器中添加一个absolute位置(可能需要调整位置)。
增加CSS：
#first, #second, #third { position: absolute;}Jquery：
$('li').on('click', function() {
//get last character of the li
var lastChar = $(this).attr('id').slice(-1);
//set which section to change based on the last character of the li's id
if (lastChar == 1) {
section = $('#first');
}
if (lastChar == 2) {
section = $('#second');
}
if (lastChar == 3) {
section = $('#third');
}
$('#first, #second, #third').not(section).fadeOut(1000, function() {
$(section).fadeIn(1000);
});
});注意：--我只为演示加速了转换。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30937794
复制相关文章
相似问题
腾讯云开发者
