我在页面底部有 3 个 div,每个 div 都有一个链接。
我想做什么
当我单击一个链接时,div 将向上滑动 400px,#maincontent 将淡出,如果其他 2 个打开,那么它们将向下滑动,因此一次只有 1 个完全可见,如果没有打开,#maincontent 将淡出早在。
我可以让他们在点击事件上上下动画,但我不能让其他人回到原来的位置。
任何帮助将非常感激。
html
<div class="poolbox1"><a class="poolview1" href="#"></a>content</div>
<div class="poolbox2"><a class="poolview2" href="#"></a>content</div>
<div class="poolbox3"><a class="poolview3" href="#"></a>content</div>
css
.poolview1{ float:right; margin-top:-25px; display:block; width:31px; height:31px; background-image:url(images/accept.png); background-repeat:no-repeat}
.poolbox2{width:300px; float:left; height:400px; background-color:#666666; margin-top:-20px;opacity: 0.9; filter: alpha(opacity=90);}
jQuery
$(".poolview1").click(function(){
$(".poolbox1").animate({
marginTop: "-=400px",
height: "+=400px"
}, 1000);
$(".poolview1").fadeOut(1000);
$("#maincontent").fadeOut(1000);
});
$(".poolview2").click(function(){
$(".poolbox2").animate({
marginTop: "-=400px",
height: "+=400px"
}, 1000);
$(".poolview2").fadeOut(1000);
$("#maincontent").fadeOut(1000);
});
$(".poolview3").click(function(){
$(".poolbox3").animate({
marginTop: "-=400px",
height: "+=400px"
}, 1000);
$(".poolview3").fadeOut(1000);
$("#maincontent").fadeOut(1000);
});