jquery animate - stop animate finishing if another animate begins
<p>Can anyone help me understand the animate better.</p>

<p>I'm wondering if it is possible to stop an current animate position whilst running. Then from another animate function, carry it on from the current position to the new one.</p>

<p>It's really hard trying to explain this so I've created a <a href="http://jsfiddle.net/motocomdigital/L5uh4/9/" rel="nofollow">fiddle</a>...</p>

<p><br /></p>

<p><strong>The <a href="http://jsfiddle.net/motocomdigital/L5uh4/9/" rel="nofollow">Fiddle</a></strong></p>

<p><a href="http://jsfiddle.net/motocomdigital/L5uh4/9/" rel="nofollow">http://jsfiddle.net/motocomdigital/L5uh4/9/</a></p>

<p>In the fiddle, you will see a tweet. If you simply roll over the tweet it will animate a left positioning, bringing the whole tweet into view.</p>

<p>But the if you roll off the tweet, it animates back to beginning.</p>

<p><em>Note: The animation will not run if the tweet is shorter than the visible twitter area. If this happens, reduce the fiddle window down to roughly the size below and re-run the <a href="http://jsfiddle.net/motocomdigital/L5uh4/9/" rel="nofollow">fiddle</a>.</em></p>

<p><img src="http://i.stack.imgur.com/rHveo.png" alt="enter image description here"></p>

<p><br /></p>

<p><strong>My Problem</strong></p>

<p>If I hover on and off the tweet like 10 times in a row. It wants to run the all 10 animate alternations one after the other, in a queue.</p>

<p>I don't want this to happen, I need it so if I hover ON the tweet - the animation begins, but if I hover OFF (before the animation is complete), I would like it pause at it's current location and animate to the hover OFF position. And not stack a queue. But also can this work vice versa?</p>

<p>Is there a simple method to this? Thanks</p>

<p><br /></p>

<p><strong>See My Code</strong></p>

<pre><code>$("#tweet").tweet({

    username: ["seaofclouds", "laughingsquid"],
    count: 1,
    template: "{text}",
    avatar_size: 32

}).bind("loaded", function(){

    var visible = $('#tweet ul').width(),
        spanTweet = $('span.tweet_text').width();  

    if ( spanTweet &gt; visible ) {

        $('#tweet ul').hover(function() {

            $('#tweet ul li').animate({            
                left : '-' + ( spanTweet - visible ) + 'px'              
            }, 3000 );

        }, function() {

            $('#tweet ul li').animate({              
                left : '0px'              
            }, 3000 );

        });

    }

});
</code></pre>

<p><br /></p>

<p>Thanks in advance for any help on this :)</p>
