Question

我在页面底部有3个div，每个div都有一个链接。

我想做什么

当我点击一个链接时，div将向上滑动400px，＃maincontent将淡出，如果其他2个中的任何一个打开，那么它们将向下滑动，因此一次只有1个完全可见，如果没有打开＃主要内容将逐渐消失。

我可以让他们在点击事件中上下动画，但我不能让其他人回到原来的位置。

任何帮助都会非常感激。

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);
});

Answer 1

正在运作 demo

HTML

<div id="poolbox1" class="poolbox"><a id="poolview1" class="poolview" href="#">poolview1</a>content</div>
<div id="poolbox2" class="poolbox"><a id="poolview2" class="poolview" href="#">poolview2</a>content</div>
<div id="poolbox3" class="poolbox"><a id="poolview3" class="poolview" href="#">poolview3</a>content</div>

CSS

.poolview{float:right; display:block; width:31px; height:31px; }
.poolbox{width:150px; float:left; height:400px; background-color:#666666;opacity: 0.9; filter: alpha(opacity=90);}

jquery的

$(".poolview").click(function(){
     $(".poolbox").animate({
          marginTop: "400px",          
          height: "0px"
     }, 1000);
     $(this).parent().animate({
          marginTop: "0px",          
          height: "400px"
     }, 1000);
     $(".poolview").fadeIn(1000);
     $(this).fadeOut(1000);
     $("#maincontent").fadeOut(1000);
});

幻灯片动画多个div切换

1 个答案: