JQuery анимации разница между 1.2.5 и 1.7.1

Question

У меня есть этот код:

$('#element') 
.animate({backgroundPosition:"0px -32px"}, 80) 
.animate({backgroundPosition:"0px -64px"}, 80) 
.animate({backgroundPosition:"0px -96px"}, 80) 
.animate({backgroundPosition:"0px -128px"}, 80) 
.animate({backgroundPosition:"0px -160px"}, 80); 

Это прекрасно работает в Jquery 1.2.5, но в 1.7.1 он отображает только первую часть (0px -32px) и не продолжает анимировать. В чем может быть проблема? Является ли JQuery 1.7.1 что-то в функции animate?

Вот что я тестирую его: http://www.kombine.net/jquery/jquery-poof-effect

Answer 1

согласно jQuery doc for .animate():

Все анимированные свойства должны быть анимированы одним числовым значением, за исключением случаев, указанных ниже; большинство свойств, которые не являются числовыми, не могут быть , анимированные с использованием базовой функциональности jQuery (например, ширина, высота, или левые могут быть анимированы, но фоновый цвет не может быть, если только не используется плагин jQuery.Color()) . Значения свойств обрабатываются как число пикселей , если не указано иное. Единицы em и% могут быть указаны как .

{ backgroundPosition: "0px -160px" } не является ни одним числовым значением.

Вы можете использовать background-position-y с одним числовым значением:

$('#element') 
    .animate({backgroundPositionY:"-32px"}, 80) 
    .animate({backgroundPositionY:"-64px"}, 80) 
    .animate({backgroundPositionY:"-96px"}, 80) 
    .animate({backgroundPositionY:"-128px"}, 80) 
    .animate({backgroundPositionY:"-160px"}, 80);​ 

Как illlustated здесь: http://jsfiddle.net/jfriend00/GEPRR/.

Также нет причин использовать несколько равномерно распределенных последовательных анимаций того же свойства, что и это. Вы можете просто использовать одну длинную анимацию, которая охватывает весь диапазон, который будет предлагать тот же результат с гораздо меньшим количеством кода:

$('#element').animate({backgroundPositionY:"-160px"}, 400); 

Я понятия не имею, что именно изменилось между 1.2.5 и 1.7.1, но если вы хотите использовать 1.7.1, вам нужно адаптироваться к своим правилам.

EDIT: К сожалению, background-position-x и background-position-y не поддерживаются во всех браузерах. Вам нужно будет посмотреть, поддерживается ли она в версиях браузера, о которых вы беспокоитесь.