javascript - 如果再次单击按钮，如何将动画返回到原始状态？

Question

现在这可能是一个有点愚蠢的问题(可能是)，但我就是无法理解它。所以我有一个水平和垂直居中的导航栏，里面有一个按钮。如果您单击该按钮，导航栏将以动画方式移动到页面顶部，并留有一点边距。我想要实现的是，当再次单击该按钮时，导航栏将动画回到其原始位置。我已经尝试了很多行代码，但我仍然无法正确处理(甚至不应该那么难)。感谢您的帮助。

JavaScript:

$("#btn").click( function(event){
    $("#wrapper").animate({
        'top': 100
    }, 400) 
});

CSS:

#wrapper {
    position:absolute;
    top:50%;
    margin-top:-100px;
    left:0;
    width:100%;
}

#nav {
    margin:20px auto;
    height:200px;
    width:900px;
    text-align:center;
    background-color:#bca;
    border:1px solid green;
}

JSFiddle here.

Answer 1

你可以使用类似的东西:

DEMO jsFiddle

$("#btn").click( function(event){
    this.toggle = !this.toggle;
    $("#wrapper").stop().animate({
        'top': this.toggle?100:"50%"
    }, 400)
});