一个按钮可左右切换滑动div

Question

我需要一个按钮来左右滑动div。代码I已经低于那些无效（或需要改进）：

<div class="nav-btn">Button</div>

$(document).ready(function(){$(".nav-btn").click(function(){
            if($("#nav").css("left") <="70%") 
                {
               $("#nav").animate({left:'70%'});        
                }   
             else   {
            $("#nav").animate({left:'-70%'});      
                        }   
       }); 
  });

Answer 1

$("#nav").css("left")将以像素为单位返回位置。因此，你的功能将无法运作。

我建议在这种情况下使用toggleClass()。结合CSS过渡：

$(function () {
    $(".nav-btn").on('click', function () {
        $('#nav').toggleClass('goLeft');
    });
});

#nav {
    position: absolute;
    left: 70%;
    background: red;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}
#nav.goLeft {
    left: -70%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">a</div>

<div class="nav-btn">Button</div>