title: animation in animation doesnt work
body: <p>After reading and testing it doesn't work, animate one element while another is in animation:</p>
  
  <pre><code>        var wWidth = $(window).innerWidth(),
          count = $('.slide').length;
  
          $('body *').css('width',wWidth);
          $('.slide div').each(function(ind,el) {
              $(el).css({
                  'left': (wWidth*(ind+1))
              });
          });
  
  
          function startAnimation() {
              $(".slide div.image2" ).animate({
                  left: wWidth/4,
                  opacity:1
              }, {
                  duration: 1800,
                  step: function( now, fx ){
                      $( ".slide div.image1" ).animate( {left:0,opacity:1 },1800);
                  }
              });
  
          };
          function finishAnimation() {
              $(".slide div.image2" ).animate({left: -wWidth,opacity:0}, {
                duration: 1000,
                step: function(now, fx) {
                  if (fx.state &gt; 0.5 &amp;&amp; fx.prop === "width") {
                     if(!$( ".slide div.image1" ).is(':animated')) // Make sure you didn't start the animation already
                       $( ".slide div.image1" ).animate({left:-wWidth,opacity:0}, 1000);
                  }
                }
              })
          }
          startAnimation();
          finishAnimation();
  </code></pre>
  
  <p>The startAnimation is working perfectly, but the finishAnimation doesnt hide and move to left .image1 div</p>
  
  <p>Please help</p>