title: How to toggle an animation in Jquery
body: <p>I am trying to make an animation on a navigation menu where when an option is clicked the other two fade out, since .fadeToggle had problems with positioning for me I decided to just animate the opacity to 0, and then back to 1 when clicked on again. (I left the CSS out the the code posted down below) <br>
  <a href="https://jsfiddle.net/L703yvke/" rel="nofollow">https://jsfiddle.net/L703yvke/</a></p>
  
  <pre><code>&lt;div id='bckDrp'&gt;
    &lt;div id='nav'&gt;
      &lt;ul id='navLst'&gt;
        &lt;li class='navOp' id='hme'&gt;Home&lt;/li&gt;
        &lt;li class='navOp' id='abt'&gt;About&lt;/li&gt;
        &lt;li class='navOp' id='prt'&gt;Portfolio&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>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);
  </code></pre>