使用动画功能显示隐藏 div

Question

您好，当用户单击某些链接时，我正在尝试为页面底部的几个 div 设置动画。

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

Div 在单击时向上滑动，但在单击其他链接时不会向下滑动。我一次只需要点击的 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