我无法使用jquery动画最小化页脚

我有一个固定的页脚，当点击图标时，我希望它最小化

这是我的小提琴

---

实际上，您已将切换功能放置在单击内，因此它无法正常工作，请将切换功能放置在单击外，它可以正常工作，但将+改为-号

    $("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }
});

    $("#button").toggle(
  function() {
    $("#title_bar").animate({ marginTop: "50px" }, 500)
  },
  function() {
    $("#title_bar").animate({ marginTop: "0px" }, 500);
  }
); 

工作

或者你可以这样做

$("#button").click(function(){
if($(this).html() == "-"){
    $(this).html("+");
        $("#title_bar").animate({ marginTop: "0px" }, 500)
}
else{
    $(this).html("-");
        $("#title_bar").animate({ marginTop: "50px" }, 500);
}


});

---

实际上，您已将切换功能放置在单击按钮内，因此无法正常工作，请将切换功能放置在单击按钮外，即可正常工作，但请将+改为-号

    $("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }
});

    $("#button").toggle(
  function() {
    $("#title_bar").animate({ marginTop: "50px" }, 500)
  },
  function() {
    $("#title_bar").animate({ marginTop: "0px" }, 500);
  }
); 

工作

或者你可以这样做

$("#button").click(function(){
if($(this).html() == "-"){
    $(this).html("+");
        $("#title_bar").animate({ marginTop: "0px" }, 500)
}
else{
    $(this).html("-");
        $("#title_bar").animate({ marginTop: "50px" }, 500);
}


});

---

切换也可以使用单击动作和动画，因此您无需重复使用它！您非常接近解决方案：-）。您也只能在需要时使用切换

这会做你想做的

$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
        $("#title_bar").animate({ marginTop: "50px" }, 500)
    }
    else{
        $(this).html("-");
         $("#title_bar").animate({ marginTop: "0px" }, 500);
    }  
});

---

切换也可以使用单击动作和动画，因此您无需使用它两次！您非常接近解决方案：-）。您也只能在需要时使用切换

这会做你想做的

$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
        $("#title_bar").animate({ marginTop: "50px" }, 500)
    }
    else{
        $(this).html("-");
         $("#title_bar").animate({ marginTop: "0px" }, 500);
    }  
});

---

将您的javascript更改为：

    $("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");

        $("#title_bar").animate({ marginTop: "50px" }, 500)

    }
    else{
        $(this).html("-");

    $("#title_bar").animate({ marginTop: "0px" }, 500);

    }

});

---

将您的javascript更改为：

    $("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");

        $("#title_bar").animate({ marginTop: "50px" }, 500)

    }
    else{
        $(this).html("-");

    $("#title_bar").animate({ marginTop: "0px" }, 500);

    }

});

这很有效

单击和切换组合不起作用的原因是切换本身是基于单击的事件。因此，实际上是将单击事件加倍并使其堆叠

这很有效

---

单击和切换组合不起作用的原因是切换本身是基于单击的事件。因此，您实际上将单击事件加倍并使其堆叠。

我认为这正是您要寻找的：

---

我想这正是你想要的：

试试这个

$(function(){
    $("#button").on('click',function(){
        var html= ($(this).html() == "-") ? '+' : '-';
        var mr= ($('#title_bar').css('marginTop') == "0px") ? '50px' : '0px';
        $(this).html(html);
        $("#title_bar").animate({ marginTop: mr }, 500)
    });
});

试试这个

$(function(){
    $("#button").on('click',function(){
        var html= ($(this).html() == "-") ? '+' : '-';
        var mr= ($('#title_bar').css('marginTop') == "0px") ? '50px' : '0px';
        $(this).html(html);
        $("#title_bar").animate({ marginTop: mr }, 500)
    });
});

请往这边走

$("#button").click(function(){
    var _self = $(this);
    if(_self.hasClass('active')){

        $("#title_bar").animate({ marginTop: "0px" }, 500,function(){
            _self.html("+");      
            _self.removeClass('active');  
        });
    }
    else{

        $("#title_bar").animate({ marginTop: "50px" }, 500,function(){
            _self.addClass('active');            
            _self.html("-");
        });
    }

});

请用这种方法试试

$("#button").click(function(){
    var _self = $(this);
    if(_self.hasClass('active')){

        $("#title_bar").animate({ marginTop: "0px" }, 500,function(){
            _self.html("+");      
            _self.removeClass('active');  
        });
    }
    else{

        $("#title_bar").animate({ marginTop: "50px" }, 500,function(){
            _self.addClass('active');            
            _self.html("-");
        });
    }

});

---

这是一个非常简单的尝试

$("#button").click(function(){
if($(this).html() == "-"){
    $(this).html("+");
        $("#title_bar").animate({ marginTop: "0px" }, 500)
}
else{
    $(this).html("-");
        $("#title_bar").animate({ marginTop: "50px" }, 500);
}


});

---

这是一个非常简单的尝试

$("#button").click(function(){
if($(this).html() == "-"){
    $(this).html("+");
        $("#title_bar").animate({ marginTop: "0px" }, 500)
}
else{
    $(this).html("-");
        $("#title_bar").animate({ marginTop: "50px" }, 500);
}


});

---

回答很好，但需要更多信息来解释OP做错了什么。建议不要只放一段代码。实际上我忘了告诉你我的页脚是绝对位置，高度为100px。我如何给它底部=-100px很好的答案，但更多的信息来解释OP做错了什么。建议不要只放一段代码。实际上我忘了告诉你我的页脚是绝对位置，高度为100px。我如何给它底部=-100px