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|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|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|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|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|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|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|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

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.

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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

问jQuery动画背景位置
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery动画背景位置EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery动画背景位置
EN