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

水深无声 2022-08-06 11:11 191阅读 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 条评论，191人围观）

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

相关阅读

相关 searchableSelect不支持change事件的解决方法

打开searchableSelect.js文件，找到selectItem函数，在这个方法中加入触发事件的代码，如图 ![watermark_type_ZmFuZ3poZW5n

蔚落/ 2023年07月25日 14:16/ 0 赞/ 1 阅读

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

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

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

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

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

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

相关 JQuery的animate

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

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

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

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

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

相关 jQuery--animate()方法

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

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

相关 jQuery--animate()方法

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

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

相关 jQuery 效果 - animate() 方法

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

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

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

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

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

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

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

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