title: Trouble getting two jquery animations to happen at the same time
body: <p>My code: <a href="http://jsfiddle.net/abbeynormal/tugyj69h/" rel="nofollow">http://jsfiddle.net/abbeynormal/tugyj69h/</a></p>
  
  <p>When I comment out line 5 of the jquery, the first animation runs fine.  When I add line 5 back in, nothing happens.</p>
  
  <p>According to the answers I've seen here on SO, these two animations should occur at the same time, with or without the "queue:false" parameter.</p>
  
  <p>Any thoughts on why this happens?  Thanks!</p>
  
  <pre><code>&lt;!doctype HTML&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;style&gt;
  #container
  {
      height: 400px;
      width: 400px;
      border-style: dotted;
      left: auto;
      right: auto;
      position: relative;
      overflow: hidden;
  }
  #gameStage
  {
      height: 400px;
      width: 400px;
      background-color: brown;
      display: inline-block;
      overflow: hidden;
      position: absolute;
  }
  #nextStage
  {
      height: 400px;
      width: 400px;
      background-color: green;
      display: inline-block;
      position: absolute;
      left: 100%;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
      &lt;div id="gameStage"&gt;&lt;/div&gt;
      &lt;div id="nextStage"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;button id="animate"&gt;Animate&lt;/button&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;    &lt;/script&gt;
  &lt;script&gt;
  $("#animate").click(move)
  function move()
  {
      $("#gameStage").animate({left:"-100%"}, {duration:2000, queue: false});
  //  $("#nextStage").animate({left:"50%"}), {duration:2000, queue: false});
  }
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>