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

回答

相關問題