使用animate函数显示隐藏div

Question

您好我试图在用户点击某些链接时从页面底部动画几个div。

例如，点击“关于”的链接，我需要该div从底部向上滑动到一定高度。但如果另一个链接E.g.单击“联系人”，我希望联系人div从底部向上滑动，同时另一个div必须向下滑动。我已经开始学习jquery并且没有太多的知识..然而这是我试过的..但是无法达到预期的方式。

Div在Click上向上滑动，但在单击另一个链接时不向下滑动。我只需要一次看到被点击的div，并且所有div都必须向下滑动或隐藏

<script>
$(document).ready (function() {
    $('#ab').click (function() {
        $('#about').show().animate({marginTop:'-360px'});
    });
     $('#con').click (function() {
         $('#contact').show().animate({marginTop:'-360px'});

    });   
});
</script>

这是CSS

#about {width:auto; background-color:#333333; height:360px; position:relative; display:none;}
#contact {width:auto; background-color:#FF3300; height:360px; position:relative; display:none;}

HTML在这里

<ul class="menu">
<li><a id="ab" href="#">About </a></li> 
<li><a id="con" href="#">Contact</a></li> 

</ul>

<div class="maindiv">

<div id="about">About</div>
<div id="contact">Contact</div>
</div>

非常感谢任何帮助..谢谢

Answer 1

你可以这样做：

$('#ab').click(function (e) {
    e.preventDefault();
    $('#contact').slideUp();
    $('#about').slideDown();
});
$('#con').click(function (e) {
    e.preventDefault();
    $('#about').slideUp();
    $('#contact').slideDown();
});

FIDDLE