jquery 动画背景位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5171080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery animate background position
提问by jimbo
I can't seem to get this working.
我似乎无法让这个工作。
$('#product_family_options_dd').animate({
height: '300px',
width: '900px',
backgroundPosition: '-20px 0px',
},
The height and width animate but not the background.
高度和宽度动画但不是背景。
回答by nnyby
You don't need to use the background animate plugin if you just use separate values like this:
如果您只使用像这样的单独值，则不需要使用背景动画插件：
$('.pop').animate({
'background-position-x': '10%',
'background-position-y': '20%'
}, 10000, 'linear');
回答by Luke Duddridge
I guess it might be because it is expecting a single value?
我想这可能是因为它期待一个单一的价值？
taken from the animate page on jQuery:
Animation Properties and Values
动画属性和值
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.
所有动画属性都应该动画为一个单一的数值，除了下面提到的；大多数非数字属性无法使用基本的 jQuery 功能进行动画处理。（例如，宽度、高度或左侧可以设置动画，但背景颜色不能设置。）除非另有说明，否则属性值被视为像素数。可以在适用的情况下指定单位 em 和 %。
回答by bfncs
Since jQuery doesn't support this out of the box, the best solution I have come across so far is to define your own CSS hooksin jQuery. Essentially, this means to define custom methods to get and set CSS values which also works with jQuery.animate().
由于 jQuery 不支持开箱即用，因此到目前为止我遇到的最佳解决方案是在 jQuery 中定义您自己的CSS 钩子。本质上，这意味着定义自定义方法来获取和设置 CSS 值，这些值也适用于 jQuery.animate()。
There is already a very handy implementation for this on github: https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js
在 github 上已经有一个非常方便的实现：https: //github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js
With this plugin in place, you can do something like this:
有了这个插件，你可以做这样的事情：
$('#demo1').hover(
function() {
$(this).stop().animate({
backgroundPositionX: '100%',
backgroundPositionY: '100%'
});
},
function () {
$(this).stop().animate({
backgroundPositionX: '105%',
backgroundPositionY: '105%'
});
}
);
For me, this worked on all browsers tested so far including IE6+.
对我来说，这适用于迄今为止测试过的所有浏览器，包括 IE6+。
I did put a quick demoonline a while ago and you can rip it apart if you need further guidance.
不久前我确实在网上发布了一个快速演示，如果您需要进一步的指导，可以将其拆开。
回答by eelkedev
jQuery's animate function is not exclusively usable for directly animating properties of DOM-objects. You can also tween variables and use the step function to get the variables for every step of the tween.
jQuery 的 animate 函数并非专门用于直接为 DOM 对象的属性设置动画。您还可以对变量进行补间，并使用 step 函数获取补间每一步的变量。
For example, to animate a background-position from background-position(0px 0px) to background-position(100px 500px) you can do this:
例如，要将背景位置从 background-position(0px 0px) 动画到 background-position(100px 500px) 你可以这样做：
$({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);
}
});
Just make sure to not forget the this.inside the step function.
只要确保不要忘记这一点。在阶跃函数内部。
回答by Jonathan Head
In your jQuery code there is a comma after the backgroundPosition portion:
在您的 jQuery 代码中， backgroundPosition 部分后面有一个逗号：
backgroundPosition: '-20px 0px',
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.
但是，在 .animate() 方法（和类似方法）中列出要更改的各种属性时，大括号之间列出的最后一个参数后面不应有逗号。我不能说这是否就是背景位置没有改变的原因，但这是一个错误，我建议修复。
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:
更新：在我刚刚完成的有限测试中，在 .animate() 方法中输入纯数值（不带“px”）适用于 backgroundPosition。换句话说，这有效：
backgroundPosition: '-20 0'
However, this does not:
但是，这不会：
backgroundPosition: '-20px 0'
Hope this helps.
希望这可以帮助。
回答by BlackDivine
You cannot use simple jquery's Animate to do that as it involves 2 values.
您不能使用简单的 jquery 的 Animate 来做到这一点，因为它涉及 2 个值。
To solve it just include Background Position Pluginand you can animate Backgrounds at will.
要解决它，只需包含背景位置插件，您就可以随意设置背景动画。
回答by user2030631
You can also use math combination "-=" to move background
您也可以使用数学组合“-=”来移动背景
$(this).animate( {backgroundPositionX: "-=20px"} ,500);
回答by Mark Coleman
try backgroundPosition:"(-20px 0)"
尝试 backgroundPosition:"(-20px 0)"
Just to double check are you referencing this the background positionplugin?
只是为了仔细检查你是否引用了这个背景位置插件？
Example of it on jsfiddlewith the background position plugin.
在jsfiddle 上使用背景位置插件的示例。
回答by mag
You can change the image background position using setInterval method, see demo here: http://jquerydemo.com/demo/animate-background-image.aspx
您可以使用 setInterval 方法更改图像背景位置，请参阅此处的演示：http: //jquerydemo.com/demo/animate-background-image.aspx
回答by fausto
I have a div My_div 250px x 250px, a background image also 250 x 250
我有一个 div My_div 250px x 250px，背景图片也是 250 x 250
css:
css：
#My_div {
background: url("..//img/your_image.jpg") no-repeat;
background-position: 0px 250px;
}
javascript:
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);
});
I hope it help
我希望它有帮助
