Hi,

I have been given a task to write an animation program (simple with text only, no images).

It has 4 types of texts:

1.Your IT
2.Our Focus
3.Our Reliability
4.Our Dedication.


This 4 texts has to appear in one line in an animated fashion:

First one has to fade in on the far left,
Second one has to fade in on the far right end and moved towards the first one towards left
Third one has to fade in on the far right end and moved towards the 2nd one towards left
Fourth one - same thing.
Repeat the above four activities.....


So I created a simple program, with 4 child DIVs under a main DIV :


This can be viewed in the test url : Your IT

Code:
        <div id="tagLine">
            <div id="tagLine1" class="yourIT">YOUR I.T</div>
            <div id="tagLine2" class="yourIT">OUR FOCUS</div>
            <div id="tagLine3" class="yourIT">OUR RELIABILITY</div>
            <div id="tagLine4" class="yourIT">OUR DEDICATION</div>
        </div>

I added the following JavaScript to run the function continuously :




Code:
            $(document).ready( setTimeout(runAnimation, 500) );
           
            
            function runAnimation() {
                
                $("#tagLine1").fadeIn(1000, function() { 
                    $("#tagLine2").fadeIn(1000, function() { 
                        $("#tagLine2").animate({right:'500px'},1000,  function() { 
                            $("#tagLine3").fadeIn(1000, function() { 
                                $("#tagLine3").animate({right:'260px'},1000, function() {  
                                    $("#tagLine4").fadeIn(1000, function() { 
                                        $("#tagLine4").animate({right:'30px'},1000, function() { 
                                            $(".yourIT").fadeOut(2000, function() { 
                                                $(".yourIT").css("right","0px"); 
                                                $(".yourIT").css("display","none"); 
                                                $("#tagLine1").css("left","0px");
                                                setTimeout(runAnimation,1000);
                                            });  
                                         }); 
                                     });        
                                 });  
                            });  
                        });   
                    });
                    
                });
                
            }
The issues with the above code:
Its animating according to the timeframe for the first 2 cycles, and after that, it animates randomly not in orderly manner.


Please let me know whats wrong with my code.


thanks,

Isaac.