动画背景位置不起作用 [英] Animate background-position not working
本文介绍了动画背景位置不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想设置背景位置的动画，但是不起作用.这可以制作动画吗
I want to animate background position but is not working. Is this possible to animate this
<head>
<style>
.test{ background:#F00}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
$(this).animate({backgroundPosition:'-50px 10px'}, 200);
});
});
</script>
</head>
<body>
<a href="javascript:void(0)">click</a>
<div>check....</div>
</body>
推荐答案
如果选中 jQuery动画页面您可以阅读:
动画
所有动画属性均应设置为单个数字值，除非另有说明.大多数非数字属性不能使用基本的jQuery功能进行动画处理(例如，可以对width，height或left进行动画处理，而不能对background-color进行动画处理，除非使用jQuery.Color()插件).
也就是说，背景位置使用2个值.一种解决方案是拼接值.
That being said, background-position use 2 values. A solution is to splice the value.
这是**
$(this).animate({
'background-position-x' : '-50px',
'background-position-y' : '10px'
}, 200);
*我可能已经将您的2个值取反了，我不记得第一个为x，第一个为y.
*I may have inverted your 2 values, i never remember wich one is x and wich one is y.
编辑
由于firefox不支持background-position-x和y，因此这里有修复它的代码:
Since firefox doesnt support background-position-x and y, here a code to fix it :
var pos = {x : '', y : ''};
$('a').click(function(){
var that = $(this);
that.animate({
'background-position-x' : '-50px',
'background-position-y' : '10px'
},{
duration : 200,
step : function(a,b){
if(b.prop == "backgroundPositionX"){
pos.x = a + b.unit
}else if(b.prop == "backgroundPositionY"){
pos.y = a + b.unit
}
},
progress : function(){
that.css('background-position', pos.x + ' ' + pos.y);
}
});
});
这篇关于动画背景位置不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
