jQuery的animate是一个非常好用的东东,但某些动画效果支持得不够好,比如backgroundPosition这种神器火狐上竟然用不了,于是我就自己写了一个。 1 /** 2 * 自定义backgroundPosition的animate,支持火狐,jQuery1.8以 ...
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在火狐浏览器上不支持backgroundPosition的解决方法
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。