jQuery的animate() 函数不支持backgroundPosition的解决方法

水深无声 2022-08-06 11:11 184阅读 0赞

在用animate() 方法之前加入下列代码（压缩的）即可

(function($) {if(!document.defaultView || !document.defaultView.getComputedStyle){var oldCurCSS = $.css;$.css = function(elem, name, force){if(name === 'background-position'){name = 'backgroundPosition';}if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){return oldCurCSS.apply(this, arguments);}var style = elem.style;if ( !force && style && style[ name ] ){return style[ name ];}return oldCurCSS(elem, 'backgroundPositionX', force) +' '+ oldCurCSS(elem, 'backgroundPositionY', force);};}var oldAnim = $.fn.animate;$.fn.animate = function(prop){if('background-position' in prop){prop.backgroundPosition = prop['background-position'];delete prop['background-position'];}if('backgroundPosition' in prop){prop.backgroundPosition = '('+ prop.backgroundPosition;}return oldAnim.apply(this, arguments);};function toArray(strg){strg = strg.replace(/left|top/g,'0px');strg = strg.replace(/right|bottom/g,'100%');strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];}$.fx.step. backgroundPosition = function(fx) {if (!fx.bgPosReady) {var start = $.css(fx.elem,'backgroundPosition');if(!start){start = '0px 0px';}start = toArray(start);fx.start = [start[0],start[2]];var end = toArray(fx.end);fx.end = [end[0],end[2]];fx.unit = [end[1],end[3]];fx.bgPosReady = true;}var nowPosX = [];nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];};})(jQuery);

参考资料：http://www.zhihu.com/question/20611410

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关解决 IE 不支持 getElementsByClassName() 的方法

//create method getElementsByClassName for document if(!document.getElements

悠悠/ 2022年11月28日 13:17/ 0 赞/ 301 阅读

相关 jQuery--jQuery动画、animate

1.隐藏和显示 hide()；隐藏 show()；显示 slideDown(), slideUp(): 只会改变元素的高度 fadeIn(), fadeOu

待我称王封你为后i/ 2022年09月22日 04:55/ 0 赞/ 196 阅读

相关 jQuery的animate() 函数不支持backgroundPosition的解决方法

在用animate() 方法之前加入下列代码（压缩的）即可 (function($) {if(!document.defaultView || !document.d

水深无声/ 2022年08月06日 11:11/ 0 赞/ 185 阅读

相关 JQuery的animate

animate(params, options) ：用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属

Myth丶恋晨/ 2022年08月02日 09:38/ 0 赞/ 165 阅读

相关 Jquery 1.9+后不支持jQuery.browser的解决方式

有次工作碰到要做表头固定的js,发现高版本的Jquery不支持jQuery.browser属性，可以通过以下办法解决： jquery.fixedtableheader.min

た入场券/ 2022年07月12日 18:41/ 0 赞/ 179 阅读

相关 jQuery--animate()方法

一般来说，用animate()是用来执行CSS属性集的自定义动画的。该方法通过CSS样式将元素从一个状态改编为另一个状态。CSS属性值是逐渐改编的，这样子我们可iuk恶意创建动

叁歲伎倆/ 2022年07月12日 11:46/ 0 赞/ 153 阅读

相关 jQuery--animate()方法

一般来说，用animate()是用来执行CSS属性集的自定义动画的。该方法通过CSS样式将元素从一个状态改编为另一个状态。CSS属性值是逐渐改编的，这样子我们可iuk恶意创建动

旧城等待，/ 2022年07月12日 11:46/ 0 赞/ 189 阅读

相关 jQuery 效果 - animate() 方法

jQuery 效果 - animate() 方法 [jQuery 效果参考手册][jQuery] 实例改变 "div" 元素的高度： $(".btn1

太过爱你忘了你带给我的痛/ 2022年06月01日 02:10/ 0 赞/ 214 阅读

相关 FireFox不支持InnerText的解决方法

FireFox不支持InnerText，这个问题上次碰到一个网盘数据大小显示的时候不正常，一直显示默认大小，在别的浏览器是正常的，想了半天才知道是FireFox不支持Inner

ゞ浴缸里的玫瑰/ 2021年09月22日 04:46/ 0 赞/ 616 阅读

相关 linux 服务不支持 chkconfig 的解决方法

系统服务，在chkconfig --add servername的时候老是提示服务不支持 chkconfig，经过查找，解决办法如下。 1.示例，auto\_run的前三行

妖狐艹你老母/ 2021年08月27日 18:43/ 0 赞/ 900 阅读