Таймер Javascript с использованием style.backgroundPosition Работает нормально в ff & chrome, не так удачно в IE

Question

Я сделал очень простой таймер обратного отсчета в js, который принимает значения из массива и применяет их к элементам background-position свойство (отображает другую часть изображения в зависимости от значения curS).

Вот код:

window.onload = timer;
        var curS = 5;
        function timer(){
            var bgP = new Array("0 -1px","0 -22px","0 -45px","0 -67px","0 -89px");
            if (curS <= 5){
            document.getElementById("count").style.backgroundPosition = bgP[curS];
            }       
        curS--;
        setTimeout("timer()",1000);
        }

Это работает в FF,Chrome, Opera и т. Д., Но не в IE 7/8. Я знаю, что IE немного сомнителен относительно старой background-position и прочитал, что он предпочитает background-position-x & background-position-y

Поэтому я поместил следующий код в IE только условно:

window.onload = timer;
        var curS = 5;
        function timer(){
            var bgPx = 0;
            var bgPy = new Array("-1px","-22px","-45px","-67px","-89px");
            if (curS <= 5){
            document.getElementById("count").style.backgroundPositionX = bgPx;
            document.getElementById("count").style.backgroundPositionY = bgPy[curS];
            }       
        curS--;
        setTimeout("timer()",1000);
        }

Это тоже не сработало, счетчик остается статичным, кто-нибудь может пролить свет на эту проблему? Спасибо заранее.

Answer 1

Ваша проблема в индексах массива: вы начинаете с 5, где вы должны начинать с 4. Chrome игнорирует его, когда вы пытаетесь установить style.backgroundPosition в значение undefined, но IE выдает "Недопустимый аргумент".

Пока я здесь, я хотел бы также отметить, что писать функции в виде строк в javascript не всегда хорошо. Ваши тайм-ауты должны быть setTimeout(timer,1000)используя прямую ссылку на функцию, а не строку.