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

Answer 2

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

JSFIDDLE LINK

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

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

3 个答案: