这个问题可能已经被问了很多次(我只是找不到它)。
我有四个链接,它们各自对应着一个“div”里面的信息。我想要发生的事情是(第一个div默认显示),点击第二个链接,第一个div淡出,第二个div淡入(在同一位置)。我已经实现了淡入/淡出效果(在某种程度上),但它们都只是堆叠起来并进行奇怪的运动。我将测试文件放在了jsfiddle上。我的jquery也可能有点问题。
这个问题可能已经被问了很多次(我只是找不到它)。
我有四个链接,它们各自对应着一个“div”里面的信息。我想要发生的事情是(第一个div默认显示),点击第二个链接,第一个div淡出,第二个div淡入(在同一位置)。我已经实现了淡入/淡出效果(在某种程度上),但它们都只是堆叠起来并进行奇怪的运动。我将测试文件放在了jsfiddle上。我的jquery也可能有点问题。
position:absolute;
这会使它们全部叠在一起,因此当你淡入/淡出时,它们会发生在同一个位置。.content {
position: absolute;
}
您可以使用锚点文本选择目标,尝试以下方法:
$("#controlls a").click(function () {
var id = $(this).text().toLowerCase().replace(' ', "")
$('#'+id).fadeIn().siblings('div').fadeOut()
});
HTML
<div id="wrapper">
<ul id="controlls">
<li><a href="#" id="one" class="dealer">Dealer</a></li>
<li><a href="#" id="two" class="advertise">Advertise</a></li>
<li><a href="#" id="three" class="social">Social Media</a></li>
<li><a href="#" id="four" class="need">Need</a></li>
</ul>
<div id="slider">
<div id="dealer">
<p>If you click on this paragraph
you'll see it just fade away.
</p>
</div>
<div id="advertise">
<p>If you click on this paragraph
you'll see it just fade away.
</p>
</div>
<div id="social">
<p>If you click on this paragraph
you'll see it just fade away.
</p>
</div>
<div id="need">
<p>If you click on this paragraph
you'll see it just fade away.
</p>
</div>
</div>
</div>
jQuery
$("#controlls li a").click(function(e) {
e.preventDefault();
var id = $(this).attr('class'); // get class of clicked anchor tag
// first fadeOut the visible div
$('#slider div:visible').fadeOut(500, function() {
// after fadeOut complete show target div
$('div#' + id).fadeIn();
})
});
在这里,您必须将fadeIn()
放在fadeOut()
回调函数内部,以便fadeIn()
会在fadeOut()
之后立即发生。
display:none
生效时,它才释放该空间。当替换框淡入时,它被定位到通常所属的下方,直到最终空间释放。那时它以一种丑陋的方式弹回到顶部。查看jQuery关于fadeToggle的文档,并查看回调部分(fadeIn和fadeOut的工作方式相同)。<div id="hello"> hello world! </div>
<div id="goodbye"> goodbye world! </div>
Javascript:
$("#hello").click(function(){
$(this).fadeToggle("slow", function(){
$("#goodbye").fadeToggle("slow"); //Here is a callback
});
});
$("#goodbye").click(function(){
$(this).fadeToggle("slow", function(){
$("#hello").fadeToggle("slow") //Here is a callback
}) ;
});
CSS:
div{
width:100px;
height:100px;
}
#hello{
background-color:red ;
}
#goodbye{
background-color:blue;
display:none;
}