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() :

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

{ 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);​

如图所示:http://jsfiddle.net/jfriend00/GEPRR/ .

也没有理由像这样使用完全相同属性的多个、均匀间隔的连续动画。您可以只使用一个覆盖整个范围的较长动画，这样可以用更少的代码提供完全相同的结果:

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

我不知道 1.2.5 和 1.7.1 之间究竟发生了什么变化，但如果你想使用 1.7.1，你需要适应它的规则。

编辑:遗憾的是，并非所有浏览器都支持background-position-x和background-position-y。您必须查看您关心的浏览器版本是否支持它。