blocks|key|767102|text|试试backgroundPosition:"(-20px+0)"|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|767103|再确认一下，你是不是引用了这个background+position插件？|767104|在JSFiddle上使用背景位置插件的例子。|767105|entityMap|0|LINK|mutability|MUTABLE|url|http://plugins.jquery.com/project/backgroundPosition-Effect|1|https://jsfiddle.net/markcoleman/YMdGT/1/^0|2|U|0|F|J|0|0|1|8|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|I|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|J|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]]]

try <code>backgroundPosition:&quot;(-20px 0)&quot;</code>
Just to double check are you referencing this the <a href="http://plugins.jquery.com/project/backgroundPosition-Effect" rel="nofollow noreferrer">background position</a> plugin?
Example of it on <a href="https://jsfiddle.net/markcoleman/YMdGT/1/" rel="nofollow noreferrer">JSFiddle</a> with the background position plugin.

blocks|key|982210|text|我猜这可能是因为它需要一个单一的值？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|982211|摘自animate+page+on+jQuery|offset|length|982212|动画属性和值|982213|除以下说明外，所有动画属性都应动画化为单个数值；大多数非数值属性不能使用基本jQuery功能进行动画处理。(例如，可以为宽度、高度或左侧设置动画，但不能设置背景色。)除非另有指定，否则属性值将被视为像素数。可以在适用的情况下指定单位em和%25。|982214|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/animate/^0|0|2|M|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

I guess it might be because it is expecting a single value?
taken from the <a href="https://api.jquery.com/animate/" rel="nofollow noreferrer">animate page on jQuery</a>:
<h2>Animation Properties and Values</h2>
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.) Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

blocks|key|982292|text|在您的jQuery代码中，backgroundPosition部分后面有一个逗号：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|982293|backgroundPosition:+'-20px+0px',|code-block|syntax|javascript|982294|但是，当在.animate()方法(和类似的方法)中列出您想要更改的各种属性时，花括号中列出的最后一个参数后面不应该有逗号。我不能说这是不是背景位置没有改变的原因，但这是一个错误，我建议修复它。|982295|更新:在我刚刚做的有限测试中，在.animate()方法中输入纯数字值(没有"px")适用于backgroundPosition。换句话说，这是可行的：|982296|backgroundPosition:+'-20+0'|982297|但是，这不会：|982298|backgroundPosition:+'-20px+0'|982299|希望这能有所帮助。|982300|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

In your jQuery code there is a comma after the backgroundPosition portion:

<pre><code>backgroundPosition: '-20px 0px',
</code></pre>

However, when listing the various properties you want to change in the .animate() method (and similar methods), the last argument listed between curly braces should not have a comma after it. I can't say if that's why the background position isn't getting changed, but it is an error and one I'd suggest fixing.

UPDATE: In the limited testing I've done just now, entering purely numerical values (without "px") works for backgroundPosition in the .animate() method. In other words, this works:

<pre><code>backgroundPosition: '-20 0'
</code></pre>

However, this does not:

<pre><code>backgroundPosition: '-20px 0'
</code></pre>

Hope this helps.

blocks|key|982363|text|你不能使用简单的jquery的Animate来做这件事，因为它涉及2个值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|982364|要解决这个问题，只需包含Background+Position+Plugin，您就可以随意设置背景动画。|offset|length|982365|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js^0|0|C|Q|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

You cannot use simple jquery's Animate to do that as it involves 2 values.

To solve it just include <a href="https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js" rel="nofollow">Background Position Plugin</a> and you can animate Backgrounds at will.

blocks|key|767347|text|如果你只是像这样使用不同的值，你不需要使用背景动画插件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|767348|$('.pop').animate({
++'background-position-x':+'10%25',
++'background-position-y':+'20%25'
},+10000,+'linear');|code-block|syntax|javascript|767349|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You don't need to use the background animate plugin if you just use separate values like this:

<pre><code>$('.pop').animate({
 'background-position-x': '10%',
 'background-position-y': '20%'
}, 10000, 'linear');
</code></pre>

blocks|key|767387|text|function+getBackgroundPositionX(sel)+{
++++pos+=+$(sel).css('backgroundPosition').split('+');
++++return+parseFloat(pos[0].substring(0,+pos[0].length-2));
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|767388|这将返回x值。数字的长度无关紧要。可以是例如9999或0。|unstyled|767389|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>function getBackgroundPositionX(sel) {
 pos = $(sel).css('backgroundPosition').split(' ');
 return parseFloat(pos[0].substring(0, pos[0].length-2));
}
</code></pre>

This returns [x] value. 
Length of number has no matter. Could be e.g. 9999 or 0.

blocks|key|767437|text|由于jQuery不支持开箱即用，到目前为止我遇到的最好的解决方案是在jQuery中定义您自己的CSS+hooks。本质上，这意味着定义自定义方法来获取和设置CSS值，这也适用于jQuery.animate()。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|767438|github上已经有一个非常方便的实现：https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js|767439|有了这个插件，你就可以这样做了：|767440|$('#demo1').hover(
++function()+{
++++$(this).stop().animate({
++++++backgroundPositionX:+'100%25',
++++++backgroundPositionY:+'100%25'
++++});
++},
++function+()+{
++++$(this).stop().animate({
++++++backgroundPositionX:+'105%25',
++++++backgroundPositionY:+'105%25'
++++});
++}
);|code-block|syntax|javascript|767441|对我来说，这在目前为止测试过的所有浏览器上都有效，包括IE6%2B。|767442|我之前在网上放了一个快速的demo，如果你需要进一步的指导，你可以把它拆开。|767443|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.cssHooks/|1|https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js|2|http://marcloehe.de/demos/jquery-animatebg/^0|1B|9|0|0|K|1W|1|0|0|0|0|D|4|2|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|F|3|G|5|6|7|1A|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1B|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1C|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|1D|8|@]|9|@$A|1E|B|1F|1|1G]]|C|$]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]]]

Since jQuery doesn't support this out of the box, the best solution I have come across so far is to define your own <a href="http://api.jquery.com/jQuery.cssHooks/" rel="noreferrer">CSS hooks</a> in jQuery. Essentially, this means to define custom methods to get and set CSS values which also works with jQuery.animate().

There is already a very handy implementation for this on github:
<a href="https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js" rel="noreferrer">https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js</a>

With this plugin in place, you can do something like this:

<pre><code>$('#demo1').hover(
 function() {
 $(this).stop().animate({
 backgroundPositionX: '100%',
 backgroundPositionY: '100%'
 });
 },
 function () {
 $(this).stop().animate({
 backgroundPositionX: '105%',
 backgroundPositionY: '105%'
 });
 }
);
</code></pre>

For me, this worked on all browsers tested so far including IE6+.

I did put a quick <a href="http://marcloehe.de/demos/jquery-animatebg/" rel="noreferrer">demo</a> online a while ago and you can rip it apart if you need further guidance.

blocks|key|767465|text|您可以使用setInterval方法更改图像的背景位置，请查看演示：http://jquerydemo.com/demo/animate-background-image.aspx|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|767466|entityMap|0|LINK|mutability|MUTABLE|url|http://jquerydemo.com/demo/animate-background-image.aspx^0|Y|1K|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You can change the image background position using setInterval method, see demo here: <a href="http://jquerydemo.com/demo/animate-background-image.aspx" rel="nofollow">http://jquerydemo.com/demo/animate-background-image.aspx</a>

blocks|key|982595|text|你也可以使用数学组合"-=“来移动背景|type|unstyled|depth|inlineStyleRanges|entityRanges|data|982596|$(this).animate(+{backgroundPositionX:+"-=20px"}+,500);|code-block|syntax|javascript|982597|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can also use math combination "-=" to move background

<pre><code>$(this).animate( {backgroundPositionX: "-=20px"} ,500);
</code></pre>

blocks|key|767524|text|我有一个div+My_div+250px+250px，背景图片也是250x250|type|unstyled|depth|inlineStyleRanges|entityRanges|data|767525|css：|767526|#My_div+{
++++background:+url("..//img/your_image.jpg")+no-repeat;
++++background-position:+0px+250px;
}|code-block|syntax|javascript|767527|javascript：|767528|$("#My_div").mouseenter(function()+{
++++var+x+=+250;
++++(function+animBack()+{
++++++++timer+=+setTimeout(function()+{
++++++++++++if+(x--+>=+0)+{
++++++++++++++++$('#My_div').css({'background-position':+'0px+'%2Bx%2B'px'});;
++++++++++++++++animBack();
++++++++++++}
++++++++},+10);
++++})();

});
$("#My_div").mouseleave(function(){
++++$('#My_div').css({'background-position':+'0px+250px'});+
++++clearTimeout(timer);
});+|767529|我希望它能帮上忙|767530|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I have a div My_div 250px x 250px, a background image also 250 x 250

css:

<pre><code>#My_div {
 background: url("..//img/your_image.jpg") no-repeat;
 background-position: 0px 250px;
}
</code></pre>

javascript:

<pre><code>$("#My_div").mouseenter(function() {
 var x = 250;
 (function animBack() {
 timer = setTimeout(function() {
 if (x-- &gt;= 0) {
 $('#My_div').css({'background-position': '0px '+x+'px'});;
 animBack();
 }
 }, 10);
 })();

});
$("#My_div").mouseleave(function(){
 $('#My_div').css({'background-position': '0px 250px'}); 
 clearTimeout(timer);
}); 
</code></pre>

I hope it help

I can't seem to get this working.

<pre><code>$('#product_family_options_dd').animate({
 height: '300px',
 width: '900px',
 backgroundPosition: '-20px 0px', 
},
</code></pre>

The height and width animate but not the background.

jQuery animate background position

jQuery

我好像不能让它工作。$('#product_family_options_dd').animate({  height: '300px',  width: '900px',  backgroundPosition: '-20px 0px',          },高度和宽度是动画效果，而不是背景效果。

问jQuery动画背景位置
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery动画背景位置EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery动画背景位置
EN