切换动画

Question

我有一个主页按钮。单击它时，将显示“关于”（动画），当我再次单击“主页”按钮时，“关于”将返回。我要创建切换动画，出现的问题是关于，但不返回。

需要您的帮助。

JSFiddle

var main = function() {
  $('#hme').click(function() {
    if ($('#abt').css('left', '-60px'))
      $('#abt').animate({
        left: '200px'
      }, 300);
    else
      $('#abt').animate({
        left: '-60px'
      }, 300);
  });
}

$(document).ready(main);

$(document).ready(main);

#abt {
  position: absolute;
  left: -60px;
  top: 50px
}

#nav {
  background: rgba(0, 0, 0, 0.20);
}

#navLst {
  margin: 0 auto;
  text-align: center;
}

li {
  list-style-type: none;
  display: inline-block;
  -webkit-transition: color .5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id='bckDrp'>
  <div id='nav'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
    </ul>
  </div>
</div>

Answer 1

那是因为您要为#abt设置css值，而不是对其进行检查。试试这个：

var main = function(){
  $('#hme').click(function(){
    var left = $('#abt').css('left');
    if(left == '-60px') {
        $('#abt').animate({left: '200px'},300 );
    } else {
        $('#abt').animate({left: '-60px'},300 );
    }

  });
}

Answer 2

使用margin-left代替left，如下面的代码

var main = function() {
      $('#hme').click(function(){
        if($('#abt').css("margin-left") == "200px"){
        	  $('#abt').animate({"margin-left": '-=200'});
        }  
       else{
            $('#abt').animate({"margin-left": '+=200'}); 
       }
            
      });
}

$(document).ready(main);

#abt {
  position: absolute;
  left: -60px;
  top: 50px
}

#nav {
  background: rgba(0, 0, 0, 0.20);
}

#navLst {
  margin: 0 auto;
  text-align: center;
}

li {
  list-style-type: none;
  display: inline-block;
  -webkit-transition: color .5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='bckDrp'>
      <div id='nav'>
        <ul id='navLst'>
          <li class='navOp' id='hme'>Home</li>
          <li class='navOp' id='abt'>About</li>
        </ul>
      </div>
</div>