JQuery滑出面板按鈕動畫

Question

我的用戶界面在導航中有兩個按鈕，當按下時會導致面板從屏幕的每一側滑出。

目前我有不必要的影響。當我第一次按下facebook按鈕時，twitter按鈕就會成功動畫，並相應地向左移動。但是，當我再次按下屏幕上的按鈕拍攝並且不會返回到正確的位置。

我不知道爲什麼會發生這種情況，但我覺得這是由於我在另一個內部有另一個點擊功能的事實？

下面是代碼：

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

Answer 1

您有#fbbtn兩個click事件處理程序。他們正在打架。

一兩件事你可以做的是做一個if語句：

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