Анимация кнопки выдвижной панели JQuery

Мой пользовательский интерфейс имеет две кнопки в навигации, которые при нажатии заставят панель выдвигаться с каждой стороны экрана.

В настоящее время у меня появляются нежелательные эффекты. Когда я нажимаю кнопку facebook, первый раз щелкающая кнопка успешно оживляет и соответственно перемещается влево. Однако, когда я нажимаю его снова, кнопка снимает экран и не возвращается в правильное положение.

Я не знаю, почему это происходит, но я чувствую, что это связано с тем, что у меня есть другая функция щелчка внутри другого?

Вот код:

    ('#fbbtn').click(function(){
    $('#panel').toggleClass('slide-away-left');
    $('#main').toggleClass('slide-away-left');

    $('#twbtn').animate({
          right: '250px'
      });

     $('#fbbtn').click(function(){  
        $('#twbtn').animate({
            right: '0px'
        })
      });

    $('#main').click(function(){
    $('#panel').removeClass('slide-away-left');
    $('#main').removeClass('slide-away-left');
    $('#twbtn').animate({
          right: '0px'
      });

});
});

Это HTML

    <!-- Top nav bar to hold button to slide the menu out of the side of the screen -->
<div id="panel">
    <button id="fbbtn">Facebook</button>
    <button id="twbtn">Twitter</button>
</div>

    <!-- Side bar that appears when button is pressed -->
    <div id="sliderFB"><h1>FACEBOOK</h1><p>Facebook</p></div>
    <div id="sliderTw"><h1>TWITTER</h1><p>Twitter</p></div>
    <!-- Hold the main content of the site -->
    <div id="main"></div>

И CSS

    #panel{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    transition:all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    background: #ff99BD;
    z-index:5;
    min-height:75px;
}

p{
oolor:#fff;
}

#sliderFB{

    position:absolute;
    color:#000;
    top: 0;
    left: 0;
    width: 250px;
    min-height:100%;
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -ms-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    overflow:auto;
    background: #34cbcb;
    z-index:1;
    -webkit-box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
    -moz-boz-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
    box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
}

#sliderTw{

    position:absolute;
    top: 0px;
    right: 0px;
    width: 250px;
    min-height:100%;
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -ms-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    overflow:auto;
    background: #34cbcb;
    z-index:1;
    -webkit-box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
    -moz-boz-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
    box-shadow: inset -34px 0px 65px -28px rgba(0,0,0,0.55);
}


#main{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    min-height:100%;
    transition:all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    overflow:auto;
    background:#343434;
    z-index:3;
}


.slide-away-left{
        transform: translate(250px,0);
        -webkit-transform:translate(250px, 0px);/* CHROME */
        -moz-transform:translate(250px, 0);
        -ms-transform:translate(250px, 0);
        -o-transform:translate(250px, 0);
}

.slide-away-right{
        transform: translate(-250px,0);
        -webkit-transform:translate(-250px, 0px);/* CHROME */

        -moz-transform:translate(-250px, 0);
        -ms-transform:translate(-250px, 0);
        -o-transform:translate(-250px, 0);
}


button{
    color:#eee;
    background:#343434;
    font-size:24px;
    line-height:1em;
    padding:20px;
    border:none;

}

.fbBtn{


}

button#twbtn{
    margin-left:1659px;
    position:fixed;
}

button:hover{
    background:#565656;
    color:#bbb;
}