Solve the problem that jQuery cannot implement Background Image Positioning animation in FireFox.

Generally, it is easy to implement a Background Image Positioning animation. It is compatible with various iyjt: 1 $ (elem ). animate ({backgroundPositionX: & amp; #39;-39px & amp; #39;, backgroundPositionY: & amp; #39;-39px & amp; #39 ;}, 500); but Firefox does not support this method ..

In general, the method to implement the positioning animation of the background image is very simple and compatible with various iyjt:
1
$ (Elem). animate ({backgroundPositionX: '-39px', backgroundPositionY: '-39px'}, 500 );
However, Firefox does not support this method. After searching by Google for half a day, I finally found a solution, that is, the $. fx. step Method of jQuery extension:

01
(Function ($ ){
02
$. Extend ($. fx. step ,{
03
BackgroundPosition: function (fx ){
04
If (fx. state ===0 & typeof fx. end = 'string '){
05
Var start = $. curCSS (fx. elem, 'backgroundposition ');
06
Start = toArray (start );
07
Fx. start = [start [0], start [2];
08
Var end = toArray (fx. end );
09
Fx. end = [end [0], end [2];
10
Fx. unit = [end [1], end [3];
11
}
12
Var nowPosX = [];
13
NowPosX [0] = (fx. end [0]-fx. start [0]) * fx. pos) + fx. start [0] + fx. unit [0];
14
NowPosX [1] = (fx. end [1]-fx. start [1]) * fx. pos) + fx. start [1] + fx. unit [1];
15
Fx. elem. style. backgroundPosition = nowPosX [0] + ''+ nowPosX [1];
16
 
17
Function toArray (strg ){
18
Strg = strg. replace (/left | top/g, '0px ');
19
Strg = strg. replace (/right | bottom/g, '000000 ');
20
Strg = strg. replace (/([0-9 \.] +) (\ s | \) | $)/g, "$ 1px $2 ");
21
Var res = strg. match (/(-? [0-9 \.] +) (px | \ % | em | pt) \ s (-? [0-9 \.] +) (px | \ % | em | pt )/);
22
Return [parseFloat (res [1], 10), res [2], parseFloat (res [3], 10), res [4];
23
}
24
}
25
});
26
}) (JQuery );
Usage:
1
$ (Elem). animate ({backgroundPosition: '(0-39px)'}, 500 );
Source of this method:
Article: http://snook.ca/archives/javascript/jquery-bg-image-animations/
Example: http://snook.ca/technical/jquery-bg/

A complete example is attached:
 
01

02

03

04

05

06
JQuery Background Image Positioning animation (solves the problem that FF does not support)
07

13

14

15
TEST
16

17