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
<! DOCTYPE html>
02
<Html>
03
<Head>
04
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
05
<Meta name = "author" content = "pandao QQ: 272383090"/>
06
<Title> jQuery Background Image Positioning animation (which can solve the problem that FF does not support) </title>
07
<Style type = "text/css">
08
* {Margin: 0; padding: 0 ;}
09
Body {font-size: 14px; color: #444; font-family: "", Arial; background: # fff ;}
10
Img {border: none; vertical-align: middle ;}
11
# Test {width: 200px; height: 50px; margin: 100px auto; border: 3px solid red; padding: 10px; cursor: pointer; background: # fff url (http://www.bkjia.com/uploadfile/2012/0814/20120814094115952.png) no-repeat left top ;}
12
</Style>
13
</Head>
14
<Body>
15
<Div id = "test"> TEST </div>
16
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-1.7.1.min.js"> </script>
17
<Script type = "text/javascript">
18
(Function ($ ){
19
$. Extend ($. fx. step ,{
20
BackgroundPosition: function (fx ){
21
If (fx. state ===0 & typeof fx. end = 'string '){
22
Var start = $. curCSS (fx. elem, 'backgroundposition ');
23
Start = toArray (start );
24
Fx. start = [start [0], start [2];
25
Var end = toArray (fx. end );
26
Fx. end = [end [0], end [2];
27
Fx. unit = [end [1], end [3];
28
}
29
Var nowPosX = [];
30
NowPosX [0] = (fx. end [0]-fx. start [0]) * fx. pos) + fx. start [0] + fx. unit [0];
31
NowPosX [1] = (fx. end [1]-fx. start [1]) * fx. pos) + fx. start [1] + fx. unit [1];
32
Fx. elem. style. backgroundPosition = nowPosX [0] + ''+ nowPosX [1];
33
34
Function toArray (strg ){
35
Strg = strg. replace (/left | top/g, '0px ');
36
Strg = strg. replace (/right | bottom/g, '000000 ');
37
Strg = strg. replace (/([0-9 \.] +) (\ s | \) | $)/g, "$ 1px $2 ");
38
Var res = strg. match (/(-? [0-9 \.] +) (px | \ % | em | pt) \ s (-? [0-9 \.] +) (px | \ % | em | pt )/);
39
Return [parseFloat (res [1], 10), res [2], parseFloat (res [3], 10), res [4];
40
}
41
}
42
});
43
}) (JQuery );
44
45
// Usage
46
$ (Function (){
47
// It doesn't matter if css is added or not.
48 www.2cto.com
Certificate ('{test'}.css ({backgroundPosition: "0 0"}). hover (function (){
49
$ (This). animate ({backgroundPosition: "(0-250px)" },{ duration: 500 });
50
}, Function (){
51
$ (This). animate ({backgroundPosition: "(0 0)" },{ duration: 500 });
52
});
53
});
54
</Script>
55
</Body>
56
</Html>
Author: pandao