在.animate（）方法之后重置位置

Question

我试图将.toggle()方法与动画结合起来。我已经按照 this fiddle 以及 this SO post 中列出的方法进行了操作，但第二次点击并未返回我的div到原来的位置。

行为应该是：

1. 点击标题
2. 内容扩展
3. 向上滑过标题
4. 再次点击
5. 内容合约
6. 向下滑动到原来的位置＆lt; - 这不会发生

HTML

<div id="headline">
  <h1>This is the headline</h1>          
</div>

<div id="page-wrap"> <!-- contains more than one article, need the whole thing to slide -->
<article class="post">
            <div class="title"><h1>Feedback</h1></div>
            <div class="content">
                <p>Videos can be more than direct instruction. Currently, how do you give feedback on assignments?</p>
                <p>It takes a lot of time, right?</p>
                <p>Video can be used to give direct feedback to the student because it communicates areas of improvement more effectively than written feedback alone.</p>  
            </div>
   </article>
</div>

CSS

#headline {
  position:fixed;
  top:10px;
  left:10px;
  width:380px;
}
#page-wrap {
  position:relative;
  top:200px;
}
.post {
  width:300px;
}
.post .title {
  cursor: pointer;
}
.post .content {
  display:none;
}

脚本

$(".title").click(function() {
        $title = $(this);
        $content = $title.next();
        $content.toggle(
            function() {
                $("#page-wrap").animate({"margin-top":"200px"}, 'fast')
            },
            function () {
                $("#page-wrap").animate({"margin-top":"-200px"}, 'fast')
            }
        )
    });

CodePen Demo

Here's a live page了解更多背景信息。