jQuery Animation error = attempt to run compile-and-go script on a cleared scope

问题

I hope someone can help with this. I've got a strange error coming up in Firebug on my page.

I'm using the code:

$(function () {
var element = $("#finger");
(function(){
    element
        .animate({ marginLeft: 130 }, 1000)
        .animate({ marginLeft: 100 },   1000 , arguments.callee);
}());
});

This works fine to animate my 'finger'.

I also have this other code:

$("SOME-OTHER-DIV").mousedown(function () { 
  $("#finger").hide(); 
});

This makes my 'finger' hide when clicked on.

Now, this all works fine.... up until the point when I reload the page whereby I get this error

"attempt to run compile-and-go script on a cleared scope"

Yet, the animation still works, and the mousedown also still works.

Any ideas what's going on here? Is it just a bug in Firefox? Many thanks in advance Chris

----------update---------

Hmm, perhaps it's not the "arguments.callee" that's causing the problem. I changed the code to:

$(function () {
i = 0;
while(i < 3){
$("#finger").animate({ marginLeft: 130 }, 1000).animate({ marginLeft: 100 },   1000);
i++;
}
});

Which loops through 3 times (ok, not infinite, but it's just for example) and I still get the "attempt to run compile-and-go script on a cleared scope" error on page reload in Firebug :-S

回答1:

This seems to be an issue with FF4. See this and this. As the other thread says try clearing the cache.

Try this code and check if you still get the error - demo

$(function() {
    animateFinger();
});

$("#abc").mousedown(function() {
    $("#finger").toggle("display");
});

function animateFinger() {
    $("#finger").animate({
        marginLeft: 130
    }, 1000).animate({
        marginLeft: 0
    }, 1000, animateFinger);
}

If that doesn't work try using setInterval and calling the method every 2000 milliseconds - demo

$(function() {
    animateFinger();
    setInterval(animateFinger, 2000);
    // You can also try function(){setTimeout(animateFinger, 0)} as a callback method instead of setInterval
});

$("#abc").mousedown(function() {
    $("#finger").toggle("display");
});

function animateFinger() {
    $("#finger").animate({
        marginLeft: 130
    }, 1000).animate({
        marginLeft: 0
    }, 1000);
}

All the best in your finger pointing business. ;)