Question

Can anyone help me understand the animate better.

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.

It’s really hard trying to explain this so I’ve created a fiddle…

The Fiddle

http://jsfiddle.net/motocomdigital/L5uh4/9/

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.

But the if you roll off the tweet, it animates back to beginning.

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 fiddle.

My Problem

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.

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?

Is there a simple method to this? Thanks

See My 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 > visible ) {

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

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

        }, function() {

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

        });

    }

});

Thanks in advance for any help on this 🙂

Answer 1

Just another question about .stop.

$('#tweet ul li').stop().animate( ... );

I hope this fiddle is what you wanted.