Question

我的UI在导航中有两个按钮，按下这些按钮会导致面板从屏幕的每一侧滑出。

目前我有不良影响。当我第一次成功激活twitter按钮并按下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;
}

Answer 1

#fbbtn有两个点击事件处理程序。他们正在互相打架。

你可以做的一件事是做一个if语句：

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

JQuery滑出面板按钮动画

1 个答案: