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

Posted 2023-05-08

【中文标题】向上/向下滑动 div - 这段代码有啥问题？

【英文标题】：Sliding up/down a div - what's wrong with this code?向上/向下滑动 div - 这段代码有什么问题？

【发布时间】：2013-03-04 22:43:49

【问题描述】：

我正在编写一个简单的脚本来在单击按钮时向上/向下滑动工具栏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>

【问题讨论】：

你能把它贴在 jsfiddle 上吗？

【参考方案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();
    );

);

【讨论】：

它需要一个引号，因为它是作为参数传递的对象的属性。破折号- 在没有引号的情况下无法正确解析。我认为这可以用更准确的措辞来表达，但这是我头脑中的答案。 （破折号通常用作subtraction operator，因此需要将其定义为字符串文字）。