Stopping animation that uses TimeOut with jQuery
<p>I am using the jQuery's <code>animate()</code> function along with TimeOut() to create a ticker effect.
Since the code is a bit long, and to better understand the effect, I uploaded the code to <a href="http://jsbin.com/edepe4/edit" rel="nofollow">JSBin (click to see)</a>. The animation works great, but I want to make it <strong>pause</strong> when a user hovers with a mouse. </p>

<p>The most important part of the code (if you haven't gone to the JSBin link) that creates the ticker effect is:</p>

<pre><code>var stocksTicker = function () {
    setTimeout(function () {
        $('#ticker li:first').animate({
            marginTop: '-27px'
        }, 800, function () {
            $(this).detach().appendTo('#ticker');
        });
        stocksTicker();
    }, 4000);
};
stocksTicker();​
</code></pre>

<p>I tried to make the pause effect by using the following code:</p>

<pre><code>$('#ticker li').hover(function () {
    $('#ticker li:first').stop();
}, function () {
    stocksTicker();
});
</code></pre>

<p>but using this just messes up the whole animation (<a href="http://jsbin.com/edepe4/2/edit" rel="nofollow">you can view the result here</a>).</p>

<p>How can I get a normal pause effect that will not mess up my animation?</p>

<p>Thanks!</p>

<p>Joel</p>
