Jquery 向上/向下滑动div-what'；这个密码怎么了？

我正在编写一个简单的脚本，用于在单击按钮时向上/向下滑动工具栏

div（位置：fixed）

。但是，当我单击按钮时，什么也没有发生，甚至

警报也没有发生

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

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>

#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
}

<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>

HTML:

<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>

#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
}

<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>


//工具栏的内容
将引号
页边距底部
添加到
页边距底部

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

});

将引号
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();
    });

});

您可以将其发布到JSFIDLE上吗？您可以将其发布到JSFIDLE上吗？它需要一个引号，因为它是作为参数传递的对象的属性。破折号
-
在没有引号的情况下无法正确解析。我想可以用更准确的措辞，但那是我头脑中的回答。（破折号通常用作参数，因此需要将其定义为字符串文字）。它需要引号，因为它是作为参数传递的对象的属性。破折号
-
在没有引号的情况下无法正确解析。我想可以用更准确的措辞，但那是我头脑中的回答。（破折号通常用作，因此需要将其定义为字符串文字）。