jQuery的动画1.2.5和1.7.1

之间的区别我有这样的代码：jQuery的动画1.2.5和1.7.1

$('#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它只显示第一部分（0像素-32px）并不会继续生成动画。可能是什么问题呢？ Jquery 1.7.1是否改变了animate函数中的某些内容？

以下是我与测试它： http://www.kombine.net/jquery/jquery-poof-effect

来源

2012-02-17 Artem Kalinchuk

不是一个答案，但是有没有一个原因，你为什么在多个步骤中通过“32px”块动画而不是简单地发出'$（“＃element”）。，400）;'？ ' – 2012-02-17 16:22:31

1.2.5和1.7.1之间有相当多的版本可以改变'.animate（）'的工作方式。 – 2012-02-17 16:23:28

@FrédéricHamidi是的，有一个原因。我需要以增量显示图像的5个不同阶段，而不是一次显示整个图像。 – 2012-02-17 16:32:47

每jQuery doc for .animate()：

所有动画属性应该动画到一个数值，除了下面提到;大多数非数字属性不能使用基本的jQuery功能动画（例如，宽度，高度，或left可以是动画，但背景色不能是，除非使用了 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，你需要适应它的规则。

编辑：不幸的是，所有浏览器都不支持background-position-x和background-position-y。您必须查看它在您关心的浏览器版本中是否受支持。

来源

2012-02-17 16:44:16 jfriend00

这工作，但不是预期的。由于'backgroundPosition：“0px -160px”'不能使用，我需要找到另一种方法来做我所需要的。我会接受这个答案。 – 2012-02-17 17:24:49

jQuery的动画1.2.5和1.7.1

回答

相关问题