jQuery的animate在火狐浏览器上不支持backgroundPosition的解决方法

jQuery的animate是一个非常好用的东东，但某些动画效果支持得不够好，比如backgroundPosition这种神器火狐上竟然用不了，于是我就自己写了一个。

 1 /**

 2  * 自定义backgroundPosition的animate，支持火狐，jQuery1.8以上版本

 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.end原本是一个string，这里将它转换成数组，就不会再进入这个if，也方便我们下面的计算

11             //例 "0px -21px"

12             fx.end = [parseFloat(fx.end.split(" ")[0]), parseFloat(fx.end.split(" ")[1])];

13         }

14         //这里fx.pos是根据传入的时间参数，从0到1变化的浮点数

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          * 获取backgroundPosition数组[top, left]，没有单位

21          */

22         function getBgPos(elem) {

23             var top  = 0.0;

24             var left = 0.0;

25             if ($(elem).css("backgroundPosition")) {

26                 //例 "0px -21px"

27                 top  = parseFloat($(elem).css("backgroundPosition").split(" ")[0]);

28                 left = parseFloat($(elem).css("backgroundPosition").split(" ")[1]);

29             }else{

30                 top  = parseFloat($(elem).css("backgroundPositionX"));

31                 left = parseFloat($(elem).css("backgroundPositionY"));

32             }

33             return [top, left];

34         }

35     }

36 })(jQuery);

注释写得很详细，相信大家都能看懂。下面是使用方法：

跟jQuery其他的animate的使用方法一致。例如：

1 $("#id").stop().animate({backgroundPosition : "0px -21px"}, 1000, function(){

2     alert("动画执行完毕");

3 })

这里只写了backgroundPosition，并没有将X和Y单独写出来，有兴趣的同学可以自己写一下，应该是比较简单的。

 

下面这个范例是一个backgroundPosition的动画，用div也可以做游戏（只是个走路范例，键盘↑↓←→键控制，开头的卡顿是按键机制的问题，不用理他）

 

点击下载

 

原文地址：http://www.cnblogs.com/shamoyuu/p/4375678.html 支持原创，拒绝盗贴。