Question

您好我正在努力研究如何让这些精灵动画让星星在Firefox中正常运行，目前它似乎在Chrome和Safari中运行良好。

var chips = true;
function star(item) {
$('.star').fadeIn();
var pos = ['0px 0','-35px 0','-70px 0','-105px 0','-140px 0', '-175px 0', '-210px 0', '-245px 0', '-280px 0', '-315px 0', '-350px 0', '-385px 0','-385px 0','-350px 0', '-315px 0','-280px 0','-245px 0','-210px 0', '-175px 0','-140px 0','-105px 0','-70px 0','-35px 0','0px 0' ];
var i = 0;
function animate() {
var a=0;
$(item).css('backgroundPosition',pos[i]);
if (i<24) {
    i++;
    }
else {
    i=0;
}
a++
}


function fade() {
if (chips) {
$(item).fadeToggle(200);
chips = false;
}
else {
$(item).fadeIn(200);
chips=true;
}
} 
setInterval(animate,55);
//setInterval(fade,200);
}

setTimeout (star('.star1'),20);
setTimeout (star('.star2'),20);
setTimeout (star('.star3'),20);
setTimeout (star('.star4'),20);
setTimeout (star('.star5'),20);
setTimeout (star('.star6'),20);
setTimeout (star('.star7'),20);
setTimeout (star('.star8'),20);
setTimeout (star('.star9'),20);
setTimeout (star('.star10'),20);
setTimeout (star('.star11'),20);
setTimeout (star('.star12'),20);
setTimeout (star('.star13'),20);
setTimeout (star('.star14'),20);
setTimeout (star('.star15'),20);
setTimeout (star('.star16'),20);
setTimeout (star('.star17'),20);
setTimeout (star('.star18'),20);
setTimeout (star('.star19'),20);
setTimeout (star('.star20'),20);

如果您想查看完整的源代码http://albertlegory.co.uk/comic.html

，这是我正在尝试使用的网页的链接

所以，如果有人能够看一看，让我知道我哪里出错了，我将不胜感激。谢谢。

Answer 1

使用FireBug查看FireFox中的代码，发现以下错误。

Error: useless setTimeout call (missing quotes around argument?)
[Break On This Error]   
setTimeout (star('.star1'),20);
comic.html (line 74)

所以你的javascript确实改变了第一颗星而不是其他星。我对“setTimeout”函数进行了一些挖掘，发现了related issue。在链接中忽略除第三个之外的所有内容并从那里开始。我所做的是围绕一个匿名函数包装你的星形函数。从第74行开始......

setTimeout (function () {star('.star1')},20);
setTimeout (function () {star('.star2')},21);
setTimeout (function () {star('.star3')},22);
setTimeout (function () {star('.star4')},23);
setTimeout (function () {star('.star5')},24);
setTimeout (function () {star('.star6')},25);
setTimeout (function () {star('.star7')},26);
setTimeout (function () {star('.star8')},27);
setTimeout (function () {star('.star9')},28);
setTimeout (function () {star('.star10')},29);
setTimeout (function () {star('.star11')},30);
setTimeout (function () {star('.star12')},31);
setTimeout (function () {star('.star13')},32);
setTimeout (function () {star('.star14')},33);
setTimeout (function () {star('.star15')},34);
setTimeout (function () {star('.star16')},35);
setTimeout (function () {star('.star17')},36);
setTimeout (function () {star('.star18')},37);
setTimeout (function () {star('.star19')},38);
setTimeout (function () {star('.star20')},39);

现在一切都应该在FireFox中运行。至于原因，我认为在FireFox中定义“setTimeout”参数的方式只是一个小差异，这是造成问题的原因。

如何让这些精灵动画在Firefox中运行

1 个答案: