滑入/滑出标题 div / 显示部分隐藏的 div

Question

对于解决此问题的一些帮助和见解，我将不胜感激。我正在开发一个初始可见高度为 180px 的标题 div 的网站。标题 div 的总高度为 340 像素。当用户单击链接时，我需要标题 div 向下滑动以显示其自身的其余部分（顶部）。因此，从数学上讲，当用户加载页面时，340px 标题 div 的底部 180px 将被显示。当他们单击链接时，div 的其余部分会向下滑动以显示其顶部 160 像素。当用户点击同一个链接时，header div 会向上滑动，所以只显示底部的 180px。

我试过让它工作，但不确定我做错了什么。我最初的想法是使用 slideToggle() （隐藏/显示），但我似乎无法让它发挥作用。 StackOverflow 上的其他人建议使用 animate()，但我也不知道如何让它工作。

我在 StackOverflow 上进行了搜索，似乎发现了很多关于显示和隐藏整个 div 的问题，但问题是这完全显示和隐藏了 div。我需要我的 div 向下滑动以显示顶部隐藏部分，然后向上滑动回到它原来的静止位置（屏幕外 -160 像素）。

任何帮助将不胜感激！我在下面包含了我的入门代码：

HTML：

<div id="header">
    <a href="#header" class="toggle">Click me to reveal the top half of this div</a>
</div>

JQuery：

$(document).ready(function(){
    $('.toggle').click(function(){
        $('#header').slideToggle("slow");
        return false;
    });
});

CSS：

#header {
    position: fixed;  /*I would like this div to always be fixed to the top of the browser window*/
    top: 160px;
    left: 0;
    width: 100%;
    height: 340px;
    z-index: 10;
}

Answer 1

请试试这个 JSFiddle。

http://jsfiddle.net/WFxLJ/3/