jquery - Div 图标不随导航扩展

Question

我试图让我的导航从页面右侧展开。我把那部分放下了，但是当我点击按钮（我想用导航移动）时，它保持不动，不会用导航向右推。

这是我所拥有的：

#wrap {
    width:600px;
} 
/* Navigation */
  #nav {
    position: fixed;
    height:22px;
    top: 50px;
    right: 0px;
    margin: 0px;
    padding: 4px 0;
    background: #00add2;
    list-style: none;
    z-index: 9999;
    width: 555px;
  }
  #nav .nav-btn {
    position: fixed;
    top: 50px;
    right: 0;
    width: 40px;
    height: 35px;
    display: block;
    cursor: pointer;
    border:1px solid #000;
    background: url('../images/nav-btn.png') no-repeat center center;
  }
  #nav .nav-btn img {
    margin: 20px 0px 0px 13px;
  }
  #nav li {
    display: inline;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    font-family: 'misoregular';
    font-size: 19px;
  }
  #nav li a {
    color: #FFF;
    text-decoration: none;
  }
  #nav li a:hover {
    color: #000;
  }

$(function() {
        $('#nav').stop().animate({'margin-right':'-555px'},1000);
        function toggleDivs() {
            var $inner = $("#nav");
        if ($inner.css("margin-right") == "-555px") {
            $inner.animate({'margin-right': '0'});
        $(".nav-btn").html()
        }
        else {
        $inner.animate({'margin-right': "-555px"});
        $(".nav-btn").html()
    }
}
    $(".nav-btn").bind("click", function(){
        toggleDivs();
    });
});

<div id="wrap">
<div id="nav">
    <div class="nav-btn"></div>
        <ul class="main-tabs">
             <li><a href="#the-advantage">THE ADVANTAGE</a></li>
             <li><a href="#banner-services">OUR SERVICES</a></li>
             <li><a href="#team">OUR TEAM</a></li>
             <li><a href="#banner-news">MAKING NEWS</a></li>
             <li><a href="#banner-contact">CONTACT</a></li>
         </ul>
</div>
</div>

这是我的小提琴的链接http://jsfiddle.net/BrentRansom/9EcyR/

提前致谢