Why doesn't this jQuery animation loop infinitely?

Question

I have a jQuery animation that positively refuses to loop. It will play through the animation once and then quit.

Here it is: http://stackoverflow.quickmediasolutions.com/stackad/fancy.html

Here is the relevant section of code:

function DoAgain()
{
    $('#block').stop().css('marginLeft','0px');
    var width = ($('#block').width()) / 2;
    var length = (1000 * num_ads) / document.getElementById('speed').value;
    $('#block').animate({marginLeft: '-=' + width},length,'linear',
      function() {
        DoAgain();
    });
}

I tried to debug the application with the Chrome JavaScript console, but according to it, everything works. (No errors, DoAgain() gets called fine, etc.)

I am really stuck here - a nudge in the right direction would be appreciated.

Answer 1

I really don't know why, but your stop() seems to have been breaking it. Here, I fixed it for you:

http://jsfiddle.net/34dvF/3/

function DoAgain()
{
    $('#block').css('marginLeft','0px');
    var width = $('#block').width() / 2;
    var length = (1000 * num_ads) / $('#speed').val();
    $('#block').animate({marginLeft: '-=' + width}, length, 'linear', DoAgain);
}

You don't really need the stop() anyway, do you? The animation has already completed before the function is called again.

Answer 2

Just thought I'd share the solution with you all:

Apparently calling stop() can only be done on an animated item, so I insert the following:

$('table:animated').stop(true,false);

... and this will stop the animation only when it is running.