title: How do I move one <div> in front of another <div>, and back?
body: <p>I have two divs. One is in the front, and I want the one from the back to move right, and then back on top of the first one. I used jQuery, but it changes z-index immediately, and then proceeds moving one div to the right and back to the left to it's original position. This is how I've tried to do it:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          .block { 
          position: absolute; 
          background-color: #abc;
          left: 0px;
          top:30px;
          width: 60px; 
          height: 60px;
          margin: 5px; 
          }
  
          .block1 { 
          position: absolute; 
          background-color: red;
          left: 0px;
          top:30px;
          width: 60px; 
          height: 60px;
          margin: 5px;
          z-index: 999;
          }
      &lt;/style&gt;
    &lt;script src="js/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="block" onmouseout="hide();"&gt;&lt;/div&gt;
  &lt;div class="block1" onmouseover="show();"&gt;&lt;/div&gt;
  
  &lt;script&gt;
  function show() {
      $(".block").animate({left: '+=100px'}, 2000);
      $(".block1").css('zIndex', '-10000');
      $(".block").animate({left: '-=100px'}, 2000);
  };
  
  function hide() {
      $(".block").animate({left: '+=100px'}, 2000);
      $(".block1").css('zIndex', '10000');
      $(".block").animate({left: '-=100px'}, 2000);
  };
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>