CODEWITHSUNDEEP
jquery
Joshc
Joshc

Reputation: 3853

jQuery can't get animate function to cycle/loop using setTimeout? Tweet Ticker

I'm creating a horizontal ticker to scroll latest tweet. Feeding in tweets via Sea of clouds jQuery plugin.

I have created an animation function which I'm trying to loop using a setTimeout(doTicker, 6000);

Can anyone help me see what I'm doing wrong? Help much appreciated thanks.


See code below...

Have also created fiddle. http://jsfiddle.net/motocomdigital/h4x8D/1/

enter image description here

Can't get the doTicker to loop/cycle

$(".tweetbar-ticker").tweet({

    username: "twitter",
    join_text: "auto",
    count: 1,
    auto_join_text_default: "we said,",
    auto_join_text_ed: "we",
    auto_join_text_ing: "we were",
    auto_join_text_reply: "we replied to",
    auto_join_text_url: "we were checking out",
    loading_text: "loading tweets..."

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

    $('.tweetbar-ticker ul li').clone().appendTo('.tweetbar-ticker ul');

    var $tweetBar = $('.tweetbar-ticker'),
        tweetLength = $('.tweetbar-ticker ul li').outerWidth(),
        $tweetAnchor = $('.tweetbar-ticker ul li a');

    $tweetBar.css({
        'width': tweetLength * 2 + 'px'
    });

    $tweetAnchor.attr({
        target: "_blank"
    });

    function doTicker() {

        $tweetBar.animate({
            'left': '-' + tweetLength + 'px'
        }, 20000, 'linear');

        setTimeout(doTicker, 6000);
    }

    doTicker();

});​

Thanks Josh

Upvotes: 0

Views: 782

Answers (2)

Sergei Zahharenko
Sergei Zahharenko

Reputation: 1524

You have correct code, but it wont animate -left as soon as it is allready animated to that value, so you have to reset left css.

Second, it's better to call it as callback not as setTimeout...

check that:

http://jsfiddle.net/h4x8D/2/

Upvotes: 2

Kristian
Kristian

Reputation: 21830

are you trying to call doTicker() recursively with a 6 second timeout?

if so, why not use setInterval instead?

that would be this:

function doTicker() {
    $tweetBar.animate({
        'left': '-' + tweetLength + 'px'
    }, 20000, 'linear');
}

setInterval(doTicker,6000);

Upvotes: 0

Related Questions