jquery - 向上/向下滑动 div - 这段代码有什么问题？

Question

我正在编写一个简单的脚本来div (position: fixed)在单击按钮时向上/向下滑动工具栏。但是当我单击按钮时没有任何反应，甚至没有alert。

脚本的动画部分似乎有问题，好像我把动画部分拿出来就会播放警报。

JS：

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidebutton").click(function () {
            alert('hide clicked');
            $("#toolbarcontainer").animate({
                bottom: '-50px' //slide toolbar down so it's hidden
            }, 500);
            $(".footer").animate({
                margin-bottom: '10px'  //slide footer back
            }, 500);
            $("#hidebutton").fadeOut();
            $("#showbutton").fadeIn();
        });
        $("#showbutton").click(function () {
            alert('show clicked');
            $("#toolbarcontainer").animate({
                bottom: '0'  //slide toolbar back up
            }, 500);
            $(".footer").animate({
                margin-bottom: '90px'  //slide footer up again
            }, 500);
            $("#showbutton").fadeOut();
            $("#hidebutton").fadeIn();
        });

    });
</script>

CSS：

#toolbarcontainer {
position:fixed;
width:100%;
height:80px;
bottom:0;
background-color: rgba(255,255,255,0.7);
filter:alpha(opacity = 80);
}
#showbutton,#hidebutton {
position:absolute;
right:25px;
top:5px;
height:10px;
width:10px;
cursor:pointer;
}
#showbutton {
display:none;  //hide until toggled
}

HTML：

<div id="toolbarcontainer">
    //contents of toolbar
    <div id="showbutton"><img src="../../site/pictures/showbutton.png"></div>
    <div id="hidebutton"><img src="../../site/pictures/hidebutton.png"></div>
</div>

Answer 1

将引号添加margin-bottom到'margin-bottom'

$(document).ready(function() {
    $("#hidebutton").click(function () {
        alert('hide clicked');
        $("#toolbarcontainer").animate({
            bottom: '-50px' //slide toolbar down so it's hidden
        }, 500);
        $(".footer").animate({
            'margin-bottom': '10px'  
        }, 500);
        $("#hidebutton").fadeOut();
        $("#showbutton").fadeIn();
    });
    $("#showbutton").click(function () {
        alert('show clicked');
        $("#toolbarcontainer").animate({
            bottom: '0'  
        }, 500);
        $(".footer").animate({
            'margin-bottom': '90px'  //slide footer up again
        }, 500);
        $("#showbutton").fadeOut();
        $("#hidebutton").fadeIn();
    });

});