(Решение) Не работает jQuery animate background position в Firefox, Opera

Привет читатель!

В этом посте хочу поделиться простым решением одной проблемы с jQuery, с которой я пару дней назад столкнулся сам.

Мне нужно было реализовать простой скрипт, который бы в блоке с помощью CSS свойства background-position прокручивал длинное изображение сначала вниз, а затем вверх.

Я написал функцию, которая используя background-position-x, background-position-y, прокручивает изображение и привязал ее к setInterval. Сам код не буду выкладывать, потому что смысл статьи в решении проблемы с прокруткой background-position, а не в коде прокрутки. (Но если надо, напишите пожалуйста в комментах и я выложу код).

На рабочей странице у меня сначала использовался jQuery 1.7.2 с Google CDN. Вообще, я сейчас подключаю jQuery с Google везде, где требуется jQuery. Потому что сейчас "время скорости", а кто больше всех стремится с скорости, конечно Google. Поэтому, если ты используешь jQuery в своих проектах, рекомендую почитать про подключение jQuery с Google.

Так вот, я написал код, проверил через Google Chrome, загрузил на хостинг и подумал, что на этом работа закончена 🙂

Но не тут то было... Оказывается в том виде, в котором я реализовал свой код, прокрутка изображения работала только в Хроме, а в Firefox, Opera, Safari и IE 9 картинка просто оставалась в первоначальном положении, хотя setInterval крутил счетчик успешно.

Когда я узнал об этом, сразу полез гуглить решение и где-то через 30 минут оно было обнаружено.

Решение проблемы с jQuery animate background-position:

1-й ШАГ

! Важно: К вашей странице должен быть подключен jQuery версии 1.8 или старше! Потому скрипт, который дан ниже, работает только с версиями jQuery старше 1.8. (Рекомендую подключить версию jQuery 1.8.1, как это сделал я)

Этот код вам нужно просто вставить, например, перед закрывающим </body> (обязательно после jQuery) или подключить как дополнительный скрипт после  jQuery в тэге <head>. Ссылка на готовые файлы со скриптом ниже после кода.

(function($) {
 $.extend($.fx.step,{
 backgroundPosition: function(fx) {
 if (fx.pos === 0 && typeof fx.end == 'string') {
 var start = $.css(fx.elem,'backgroundPosition');
 start = toArray(start);
 fx.start = [start[0],start[2]];
 var end = toArray(fx.end);
 fx.end = [end[0],end[2]];
 fx.unit = [end[1],end[3]];
 }
 var nowPosX = [];
 nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
 nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
 fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

function toArray(strg){
 strg = strg.replace(/left|top/g,'0px');
 strg = strg.replace(/right|bottom/g,'100%');
 strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
 var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
 return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
 }
 }
 });
})(jQuery);

Подключаемые файлы:

Скачать jquery.bgpos.js (1,16 кб)
Скачать jquery.bgpos.min.js (0,6 кб)

2-й ШАГ

Просто немного отредактировать свой код, где используется jQuery.animate, согласно следующему примеру:

jQuery( '#element_id' ).animate({ backgroundPosition : '0 -271' }, 1000);

! Важно: Используйте именно backgroundPosition (точно в таком виде и без разделения на X, Y)

А если вы используете setInterval для вызова функции или внутри функции, то определяйте его вот так (с помощью переменной):

var yourTimer = window.setInterval( your_function, 2000 );

Успехов вам в освоении jQuery и Javascript! 

Богдан Григорук

[ Прочитайте комменты ниже или напишите свой... ]

Ищете хостинг для своего сайта? Могу порекомендовать свой (нажмите здесь)

Один отзыв к “(Решение) Не работает jQuery animate background position в Firefox, Opera”

  1. Konstantin 27.05.2015 в 17:24 #

    Вау, круто, спасибо! )