jqueryanimation背景的位置
我似乎无法得到这个工作。
$('#product_family_options_dd').animate({ height: '300px', width: '900px', backgroundPosition: '-20px 0px', }, 高度和宽度的animation，但不是背景。
你不需要使用背景animation插件，如果你只是使用这样的单独的值：
$('.pop').animate({ 'background-position-x': '10%', 'background-position-y': '20%' }, 10000, 'linear');
我想这可能是因为它期待一个单一的价值？
取自jQuery上的animation页面 ：
animation属性和值
所有的animation属性应该被animation成一个数字值，除非如下所述; 大多数非数字属性不能使用基本的jQueryfunction来animation。 （例如，宽度，高度或左侧可以是animation效果，但不能使用背景色。）除非另有说明，否则属性值将被视为像素数。 可以指定单位em和％。
由于jQuery并不支持这种开箱即用的方法，所以目前为止我所遇到的最好的解决scheme是在jQuery中定义自己的CSS钩子 。 本质上，这意味着定义自定义方法来获取和设置CSS值，也可以使用jQuery.animate（）。
在github上已经有了一个非常方便的实现： https ： //github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js
有了这个插件，你可以做这样的事情：
$('#demo1').hover( function() { $(this).stop().animate({ backgroundPositionX: '100%', backgroundPositionY: '100%' }); }, function () { $(this).stop().animate({ backgroundPositionX: '105%', backgroundPositionY: '105%' }); } );
对我来说，这个工作到目前为止testing的所有浏览器，包括IE6 +。
我刚才在网上做了一个快速演示 ，如果你需要进一步的指导，你可以把它分开。
jQuery的animation函数不是专门用于直接animationDOM对象的属性。 也可以调用variables，并使用step函数获取补间每一步的variables。
例如，要从背景位置（0px 0px）到背景位置（100px 500px）设置背景位置的animation，可以这样做：
$({temporary_x: 0, temporary_y: 0}).animate({temporary_x: 100, temporary_y: 500}, { duration: 1000, step: function() { var position = Math.round(this.temporary_x) + "px " + Math.round(this.temporary_y) + "px"; $("#your_div").css("background-position", position); } });
只要确保不要忘记这一点。 里面的stepfunction。
在你的jQuery代码中，在backgroundPosition部分之后有一个逗号：
backgroundPosition: '-20px 0px',
但是，在.animate（）方法（以及类似的方法）中列出要更改的各种属性时，大括号之间列出的最后一个参数在其后面不应有逗号。 我不能说这是为什么背景的位置没有改变，但这是一个错误，我会build议修复。
更新：在我刚才所做的有限testing中，在.animate（）方法中input纯数字值（不带“px”）适用于backgroundPosition。 换句话说，这个工作：
backgroundPosition: '-20 0'
但是，这并不是：
backgroundPosition: '-20px 0'
希望这可以帮助。
您也可以使用math组合“ – =”来移动背景
$(this).animate( {backgroundPositionX: "-=20px"} ,500);
你不能使用简单的jQuery的Animate来做到这一点，因为它涉及到2个值。
要解决它只是包括背景位置插件 ，你可以animation背景随意。
尝试backgroundPosition:"(-20px 0)"
只是要仔细检查你是否参考了这个背景位置插件？
它在jsfiddle上的背景位置插件的例子。
您可以使用setInterval方法更改图像的背景位置，请参阅演示在这里： http : //jquerydemo.com/demo/animate-background-image.aspx
我有一个div My_div 250px x 250px，背景图片也是250 x 250
CSS：
#My_div { background: url("..//img/your_image.jpg") no-repeat; background-position: 0px 250px; }
JavaScript的：
$("#My_div").mouseenter(function() { var x = 250; (function animBack() { timer = setTimeout(function() { if (x-- >= 0) { $('#My_div').css({'background-position': '0px '+x+'px'});; animBack(); } }, 10); })(); }); $("#My_div").mouseleave(function(){ $('#My_div').css({'background-position': '0px 250px'}); clearTimeout(timer); });
我希望它有帮助
使用Firefox：
指定两个值：不能与任何语法组合一起使用 – 如上面指出的几个。 使用Firebug，我得到“错误在parsing'background-position'的值。 直到animation结束。
'backgroundPosition'：'17 .5em' – 指定1值：在FF和CHrome OPera，SF（Safari）和IE中有效，第二个值或y位置（垂直）设置为“中心”。 从Firebug中， 元素的风格被设置为：
style =“background-position：17.5em center;”
function getBackgroundPositionX(sel) { pos = $(sel).css('backgroundPosition').split(' '); return parseFloat(pos[0].substring(0, pos[0].length-2)); }
这返回[x]值。 数字的长度没有关系。 可能是例如9999或0。
