Do a website today just to use the background animation effect;
Start yourself $ (this). Animate ({"background-position": "0 0"}, "fast") wrote this but found no effect;
Then on the Internet to find a solution, the solution is as follows:
(function ($) {if (!document.defaultview | |!document.defaultview.getcomputedstyle) {var oldcurcss = Jquery.curcs S Jquery.curcss = function (elem, name, Force) {if (name = = = ' Background-position ') {name = ' Backgro Undposition '; } if (name!== ' backgroundposition ' | |!elem.currentstyle | | elem.currentstyle[name]) {return o Ldcurcss.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[' backgr Ound-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 = $.curcss (Fx.elem, ' Backgroundpositi On '); if (!start) {//ff2 No inline-style fallback start = ' 0px 0px '; } start = ToArray (start); Fx.start = [start[0],start[2]]; var end = ToArray (fx.options.curAnim.backgroundPosition); Fx.end = [end[0],end[2]]; Fx.unit = [end[1],end[3]]; Fx.bgposready = true; }//retUrn 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);
Called the above code, and then $ (this). Animate ({"background-position": "0 0"}, "fast") can be used to write this.
Workarounds for Background-position Invalid in JQuery animate