Animate background-position not working
Question
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>
3 answers
solution1
2 ACCPTED 2013-05-27 13:53:21
If you check jQuery animate page you can read that :
Animate
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, unless the jQuery.Color() plugin is used).
That being said, background-position use 2 values. A solution is to splice the value.
Here' how* :
$(this).animate({
'background-position-x' : '-50px',
'background-position-y' : '10px'
}, 200);
*I may have inverted your 2 values, i never remember wich one is x and wich one is y .
EDIT
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);
}
});
});
solution2
1 2013-05-27 19:05:22
I forgot where I came across this, but here is a little pug-in that does the trick quite nicely:
(function($){$.extend($.fx.step,{backgroundPosition:function(c){if(c.state===0&&typeof c.end=='string'){var d=$.curCSS(c.elem,'backgroundPosition');d=toArray(d);c.start=[d[0],d[2]];var e=toArray(c.end);c.end=[e[0],e[2]];c.unit=[e[1],e[3]]}var f=[];f[0]=((c.end[0]-c.start[0])*c.pos)+c.start[0]+c.unit[0];f[1]=((c.end[1]-c.start[1])*c.pos)+c.start[1]+c.unit[1];c.elem.style.backgroundPosition=f[0]+' '+f[1];function toArray(a){a=a.replace(/left|top/g,'0px');a=a.replace(/right|bottom/g,'100%');a=a.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");var b=a.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);return[parseFloat(b[1],10),b[2],parseFloat(b[3],10),b[4]]}}})})(jQuery);
And in use:
$(function(){
$('a').click(function(){
$(this).animate({backgroundPosition: "(-50px 10px)"}, 200);
});
});
solution3
0
I think that jQuery can't animate the background-position . One solution, is using transition, in CSS:
a {
-webkit-transition: background-position 0.6s;
-moz-transition: background-position 0.6s;
-ms-transition: background-position 0.6s;
-o-transition: background-position 0.6s;
transition: background-position 0.6s;
}
And just change the background-position in jQuery with .css() method:
$(function(){
$('a').click(function(){
$(this).css('background-position', '250px 250px');
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.