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

});