如果再次单击该按钮，如何使动画返回其原始状态？

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在这里。

Answer 1

您可以使用类似这样的方法：

演示jsFiddle

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

Answer 2

您可以引入一个clicked变量，它可以告诉您是否已单击（或类似），然后在第一次单击时，向上移动，在第二次单击时，向下移动等等。

JSFIDDLE链接

var clicked = false;
$("#btn").click( function(event){
    clicked = !clicked;
    if(clicked)
    {
        $("#wrapper").animate({
            'top': '-=100'
        }, 400)
    }
    else
    {
        $("#wrapper").animate({
            'top': '+=100'
        }, 400)
    }
});

Answer 3

您可以使用jquery UI switchClass插件来实现。 或以丑陋的方式更新您的代码，例如：

$("#btn").click( function(event) {
    var top = $("#wrapper").css('top') == '100px' ? '50%' : 100;
     $("#wrapper").animate({
        'top': top
      }, 400)
});