Jquery fly-in text animation: How to pause an element on hover?
<p>I have the following Jquery text fly-in animator(See code below). Now I want the animation to stop once a user hovers over any of the elements being animated. Also, I want the last element(Text6) to pause a little longer before fading out. I tried applying: </p>

<pre><code>if ($activeText.is('.lastClass')) 
{$activeText.animate.delay(5000) OR $activeText.delay(5000)};
</code></pre>

<p>but it does not work. How do I pause the animation on the last div? </p>

<p>Jquery:</p>

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

$(document).ready(function(){

    $('.container .flying-text').css({opacity:0});
    $('.container .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 = $(".container .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 = $('.container .flying-text:first'); //if it is last text, loop back to first text

        // To fade all out
        var $allText = $(".container 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 lastClass"&gt;Text6&lt;/div&gt;                   
&lt;/div&gt;
</code></pre>

<p>Thank You!</p>
