title: How to properly Queue animations/transitions using the jQuery Cycle Plugin
body: <p>I'm working on this <a href="http://parker.astonishlive.com/" rel="nofollow">project</a></p>
  
  <p>I want to queue my animations in the fader/slider.</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
    // Hover Switch
     function fnFadeHover(){$('#feature_fadeSlideshow').cycle($('#feature_fadeBtns li').index($(this).parent()));}
     function fnFadeOut(){}
     $('#feature_fadeSlideshow').cycle({
       //fx:'fade',
       timeout:9000,
       delay:5000,
       pause:true,
       after:onAfter,
       before: function(currSlideElement, nextSlideElement, options, afterCallBack, forwardFlag){
         console.log('before');
         var slide_index = $('#feature_fadeSlideshow .panel').index(nextSlideElement);
         $('#feature_fadeBtns li').removeClass('activePager').eq(slide_index).addClass('activePager');    
  
          $('#auto-automobile').animate({"top": "75px","left": "-2000px"}, "slow",  function(){
             $('#auto-sun').animate({"top": "-300px"}, "slow", function(){
               $('#auto-cloud').animate({"top": "20px", "right":"300px"}, "slow", function(){
                 $('#auto-smallCloud').animate({"top": "10px"}, "slow")})
  
           $('#home-house').animate({"top": "-300px", "left": "310px"}, "slow", function(){
             $('#home-tree').animate({"bottom":"-400px"}, "slow", function(){
               $('#home-smallCloud').animate({"top": "20px"}, "slow")})
             }); 
  
            $('#business-highway').animate({"top": "-200px"}, "slow", function(){
             $('#business-buildings').animate({"bottom": "-400px"}, "slow", function(){
               $('#business-cloud').animate({"top": "20px"}, "slow")})
             });       
  
            $('#life-object').animate({"top": "150px"}, "slow", function(){
             $('#life-flowers').animate({"top": "131px"}, "slow", function(){
               $('#life-scope').animate({"top": "284px"}, "slow")})
             });
  
            });
           });       
       }});
     $('#feature_fadeBtns li a').hoverIntent(fnFadeHover,300,fnFadeOut);
  });  
        function onAfter() { 
             $('#auto-automobile').animate({"top": "75px","left": "260px"}, "slow", function(){
                 $('#auto-sun').animate({"top": "0px", "right":"400px"}, "slow", function(){
                   $('#auto-cloud').animate({"top": "20px"}, "slow", function(){
                     $('#auto-smallCloud').animate({"top": "20px", "left": "415px"}, "slow")})
  
           $('#home-house').animate({"top": "105px", "left": "310px"}, "slow", function(){
             $('#home-tree').animate({"top": "90px"}, "slow", function(){
               $('#home-smallCloud').animate({"top": "25px", "right":"5px"}, "slow")})
             }); 
  
            $('#business-highway').animate({"top": "200px"}, "slow", function(){
             $('#business-buildings').animate({"bottom": "60px"}, "slow", function(){
               $('#business-cloud').animate({"top": "30px"}, "slow")})
             });   
  
  
            $('#life-object').animate({"top": "150px"}, "slow", function(){
             $('#life-flowers').animate({"top": "131px"}, "slow", function(){
               $('#life-scope').animate({"top": "284px"}, "slow")})
             });
          });
        }); 
  }
  &lt;/script&gt;
  [[Content]]
  </code></pre>
  
  <p>​</p>
  
  <p><strong>Goal</strong>
  If you hover over the navigation under the fader/slider you will see that my animations are not working properly. They Jump around. I want the animation to animate when i hover over auto/home/business or life or when they transition. </p>
  
  <p>As of right now it isn't working properly. <strong>Any suggestions?</strong></p>