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

我正在尝试将.toggle方法与动画相结合。我遵循了中以及中列出的方法，但第二次单击并没有将div返回到原始位置

行为应该是：

单击标题 内容扩展 滑过标题 再次点击 内容合同

---

在使用jQuery 1.11的live页面上向下滑动到原始位置。togglefunction，函数在1.8中被弃用，在1.9中被删除。我不建议使用itOh，duh…我甚至没想过看更新历史。在同一对象上有多个事件的最佳选择是什么？

<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>

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