JQuery slide out panel button animation

Question

My UI has two buttons in the navigation that when pressed will cause a panel to slide out from each side of the screen.

Currently I am having unwanted effects. When I press the facebook button the first time the twitter button successfully animates and moves to the left accordingly. However when I press it again the button shoots of the screen and does not return to its correct position.

I don't know why this is happening but I've a feeling it is due to the fact that I have another click function inside of another?

Here is the code:

    ('#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'
      });

});
});

This is the 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>

And 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;
}

Answer 1

You have two click event handlers for #fbbtn. They're fighting eachother.

One thing you can do is do an if statement:

if ($("#main").hasClass('slide-away-left') {
 $('#twbtn').animate({
          right: '0'
      });
} else {
 $('#twbtn').animate({
          right: '250px'
      });
}