向上/向下滑动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(); 
    }); 

});