title: Jquery - how to play .animate() once and reset it with other button
body: <p>I am making a website with some divs that slide into the screen.
  How can I make the div that is already in the front NOT play the animation when the respective button is pressed?</p>
  
  <p>I set up the jQuery for each div like this:</p>
  
  <pre><code>$(button).click(function(event) {
    $(div).css("right", "-100%");
    $(div).animate({right: '0%'});
    $(div).css("z-index", "1");
    $(other-div).css("z-index", "0");
  });
  </code></pre>
  
  <p>I need to make the 'hidden' div's play the animation to make them come to the front. I just don't want the animation to play if the div is already in the front.</p>
  
  <p>Here's a fiddle of what I have:</p>
  
  <p><a href="https://jsfiddle.net/cn6goeuq/" rel="nofollow noreferrer">https://jsfiddle.net/cn6goeuq/</a></p>
  
  <p>I have tried to use .delay() like this:</p>
  
  <pre><code>$(button).click(function(event) {
    $(div).animate({right: '0%'});
    $(div).css("z-index", "1");
    $(other-div).css("z-index", "0");
    $(other-div).delay(2000).css("right", "-100");
  });
  </code></pre>
  
  <p>so that the hidden div would go back to 'right: -100%' unnoticed, but it didn't work. No idea why.</p>
  
  <p>I also tried to use a variable to help me activate and deactivate the animation of the div that is showing but also in vain. I wanted something like this:</p>
  
  <pre><code>var x = 0;
  var y = 0;
  
    $(button1).click(function(event1){
        $(div1).animate({right: '0%'});
      x++;
      y=0;
      if (x &gt;= 1) {
        $(this).off(event1);
    }
    });
  
    $(button2).click(function(event2){
        $(div2).animate({right: '0%'});
      y++;
      x=0;
      if (y &gt;= 1) {
        $(this).off(event2);
      }
    });
  </code></pre>
  
  <p>I wanted to make the event1 work only once when button1 is pressed and reset if other button is pressed but it also didn't work.</p>
  
  <p>I ran out of ideas of how to solve this!</p>
  
  <p>EDIT</p>
  
  <p>I'm afraid that making the animation conditional did not work as well. I had exactly the same result. I tried making it conditional according to the z-index. Like this: </p>
  
  <pre><code>$(button).click(function(event) { 
    if($(div).css('z-index') !== '0'){ 
      $(div).css("right", "-100%");
      $(div).animate({right: '0%'});
    };
    $(div).css("z-index", "1");
    $(other-div).css("z-index", "0");
   });
  </code></pre>