How to get these sprites animations to work in Firefox

Question

Hi I'm struggling to work out how to get these sprite animations for the stars to work properly in Firefox, it currently seems to be working fine in Chrome and 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);

Here's a link to the page I'm trying to work with if you want to view the full source code http://albertlegory.co.uk/comic.html

So if anyone is able to have a look and let me know where I'm going wrong, it would be much appreciated. Thanks.

score 0 · Accepted Answer · edited May 23 '17 at 12:05

Looking at your code in FireFox using FireBug, I found the following error.

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

So your javascript does change the first star but not the others. I did some digging on the "setTimeout" function and found a related issue. In the link ignore all but the third one down and start from there. What I did was wrap your star function around an anonymous function like so. Starting at line 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);

And now everything should work in FireFox. As for the reason why, I believe it is just a small difference in how "setTimeout"'s parameter is defined in FireFox that is the cause for the issue.

How to get these sprites animations to work in Firefox

1 Answers1