javascript - 如何在 Jquery 中切换动画

Question

我正在尝试在导航菜单上制作动画，当单击一个选项时，其他两个会淡出，因为 .fadeToggle 对我来说定位有问题我决定将不透明度设置为 0，然后再设置为 1再次点击时。 (我在下面发布的代码中遗漏了 CSS)
https://jsfiddle.net/L703yvke/

<div id='bckDrp'>
  <div id='nav'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
      <li class='navOp' id='prt'>Portfolio</li>
    </ul>
  </div>
</div>

---

var main = function(){
  $('#hme').click(function(){
    $('#abt, #prt').animate({opacity: 0},300 );
  });
  if($('#abt, #prt').css('opacity') == 0) {
    $('#hme').click(function(){
      $('#abt, #prt').animate({opacity: 1},300 );
    }
  )};
}

$(document).ready(main);

Answer 1

main 函数只运行一次。所以你只做了一次 if-statement 。您还绑定(bind)了 click 事件，我认为这不是您期望的。相反，您可以简单地使用 if-else 并将您的条件放在点击事件中:

var main = function(){
  $('#hme').click(function(){
    if($('#abt, #prt').css('opacity') == 0) 
        $('#abt, #prt').animate({opacity: 1},300 );
    else
        $('#abt, #prt').animate({opacity: 0},300 );
  });
}

Demo