JQuery Text animation - How to replace current text values with new ones
<p>I have a jquery fly-in text animator applied to a div. Now the div can only be a certain size and thus allows a certain amount of lines of text. Now I would like to add more lines of text to the animation, basically replacing the current ones, and looping back to the first text lines again. Check my code to see what I mean:</p>

<p>JQuery:</p>

<pre><code>&lt;script type="text/javascript"&gt;

$(document).ready(function(){

    $('.flying1 .flying-text').css({opacity:0});
    $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1500); //animate first text
    var int = setInterval(changeText, 2000);    // call changeText function every 5 seconds

function changeText(){  
    var $activeText = $(".flying1 .active-text");     //get current text    
    var $nextText = $activeText.next();  //get next text
    /*if($activeText.next().length == 0) $nextText = $('.container .flying-text:first');

    $activeText.animate({opacity:0}, 1000);
    $activeText.animate({marginLeft: "-100px"});*/

     if ($activeText.next().length == 0) {
        $nextText = $('.flying1 .flying-text:first'); //if it is last text, loop back to first text

        // To fade all out
        var $allText = $(".flying1 div");
        $allText .animate({
            opacity: 0
        }, 1000);
        $allText .animate({
            marginLeft: "-100px"
        });
    }

    $nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginLeft: "0px"}, 1500, function(){

        $activeText.removeClass('active-text');                                           
    });
}
});
&lt;/script&gt;
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="flying1"&gt;
  &lt;div class="flying-text active-text"&gt;Text1&lt;/div&gt;                  
  &lt;div class="flying-text"&gt;Text2&lt;/div&gt;                      
  &lt;div class="flying-text"&gt;Text3&lt;/div&gt;
  &lt;div class="flying-text"&gt;Text4&lt;/div&gt;
  &lt;div class="flying-text"&gt;Text5&lt;/div&gt;  
  &lt;div class="flying-text"&gt;Text6&lt;/div&gt;                   
&lt;/div&gt;
</code></pre>

<p>That is the max amount of text that Div(.flying1) can take due to space constraints...
I want to add another 6 lines into that text animation that runs after Text1-6, so they would basically be Text7-12 running in the same space as Text1-6...</p>

<p>Thank You!! </p>
