JQuery's animate does not support the backgroundPosition solution on Firefox. jqueryanimate

JQuery's animate does not support the backgroundPosition solution on Firefox. jqueryanimate

JQuery's animate is a very useful stuff, but some animation effects are not well supported. For example, Firefox, an artifact like backgroundPosition, cannot be used, so I wrote it myself.

1/** 2 * customize the animate of backgroundPosition. Firefox is supported. jQuery1.8 or later versions 3 * @ author Meleong 4 * v1.00 5 */6 (function ($) {7 $. fx. step ["backgroundPosition"] = function (fx) {8 if (typeof fx. end = 'string') {9 fx. start = getBgPos (fx. elem); 10 // fx. the end is originally a string. Here it is converted to an array, and it will not enter this if. It is also convenient for us to calculate 11 // example "0px-21px" 12 fx. end = [parseFloat (fx. end. split ("") [0]), parseFloat (fx. end. split ("") [1])]; 13} 14 // here fx. pos is a floating point number 15 var nowPosX = (fx. end [0]-fx. start [0]) * fx. pos) + fx. start [0] + fx. unit; 16 var nowPosY = (fx. end [1]-fx. start [1]) * fx. pos) + fx. start [1] + fx. unit; 17 fx. elem. style. backgroundPosition = nowPosX + ''+ nowPosY; 18 19/** 20 * Get the backgroundPosition array [top, left], no unit 21 */22 function getBgPos (elem) {23 var top = 0.0; 24 var left = 0.0; 25 if (elem(elemate.css ("backgroundPosition ")) {26 // For example, "0px-21px" 27 top = parsefloat(partition (elemate.css ("backgroundPosition "). split ("") [0]); 28 left = parsefloat(partition (elemate.css ("backgroundPosition "). split ("") [1]); 29} else {30 top = parsefloat(partition (elemental .css ("backgroundPositionX"); 31 left = parsefloat(partition (elemental .css ("backgroundPositionY ")); 32} 33 return [top, left]; 34} 35} 36}) (jQuery );

The comments are detailed and can be understood by everyone. The following is how to use it:

It is consistent with the usage of other animations in jQuery. For example:

1 $ ("# id "). stop (). animate ({backgroundPosition: "0px-21px"}, 1000, function () {2 alert ("animation completed"); 3 })

Only the backgroundPosition is written here, and X and Y are not written separately. If you are interested, you can write it by yourself. It should be relatively simple.

 

The following example shows an animation of backgroundPosition. You can use a div to play games (just a walking example. The keyboard is very slow → key-controlled. Freezing at the beginning is a problem with the key-press mechanism, so you don't have to worry about it)

 

Click to download

 

Original address: http://www.cnblogs.com/shamoyuu/p/4375678.html support original, refuse to steal stickers.