0

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

目前我有不良影响。当我第一次按下 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;
}
4

1 回答 1

1

#fbbtn 有两个单击事件处理程序。他们在互相争斗。

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

if ($("#main").hasClass('slide-away-left') {
 $('#twbtn').animate({
          right: '0'
      });
} else {
 $('#twbtn').animate({
          right: '250px'
      });
}
于 2013-10-17T15:30:37.400 回答