Jquery text animation delay function not working
<p>I have this following jquery text fly-in animation.Here is my code before I explain further:</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"}, 1200); //animate first text
    var int = setInterval(changeText, 3500);    // 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.is('.end')) {
        $activeText.stop().delay(5000);
        $('.flying1').html('&lt;div class="flying-text active-text"&gt;Text4&lt;div&gt;
                                &lt;div class="flying-text"&gt;Text5&lt;/div&gt;
                                &lt;div class="flying-text end2"&gt;Text6&lt;/div&gt;');
        $('.flying1 .flying-text').css({opacity:0});
        $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1200); //animate first text
    };

    if ($activeText.is('.end2')) {
        $activeText.stop().delay(5000);
        $('.flying1').html('&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 end"&gt;Text3&lt;/div&gt;');
        $('.flying1 .flying-text').css({opacity:0});
        $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1200); //animate first text
    };

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

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

<p>HTML</p>

<pre><code>&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 end"&gt;Text3&lt;/div&gt;
</code></pre>

<p>Now as you can see, Text1-3 animates/flies in first, then when Text3 is reached, they are replaced by Text4-6 in the animation, when Text6 is reached again, it loops back to Text1-3 again...Now basically what I want to do is pause/delay the animation for longer when it reaches the end of the Text, that is at Text3(class="flying-text end") and Text6(class="flying-text end2". So I want Text3 and Text6 to animate longer than all the others. how do I do that? The code I used :</p>

<pre><code>$activeText.stop().delay(5000);
</code></pre>

<p>does not work...</p>

<p>Thank You</p>
