You can actually animate a background image with jQuery – though it’s not as easy as it sounds.
There are cross-browser concerns.
I’ve tested many ways to achieve it and in this post there is code that should work cross-browser. Let’s dig in…
At first I thought this would be simple – just use jQuery .animate() to change the background position on an element, right?
Wrong.
Turns out that an element style with two values, like background-position, is not officially “supported” with .animate().
Also, IE handles the value differently, as do other browsers. It will work in some browsers which makes it even more confusing.
There’s plug-ins out there that will probably accomplish this nicely, but i have not looked into them. Wanted to achieve this myself as an exercise.
We will have an element with a field of stars as a background:
Markup
We are setting two attributes on our element, “data-speed” and “data-direction”. Starting with 1, you can increase the speed of the animation by increasing the number of the “data-speed” attribute. Setting to 0 will disable animation. The “data-direction” attribute will take a value of “up”, “down”, “left” or “right”.
<div class="space" data-speed="1" data-direction="left"></div>
CSS
.space { width:650px; height:100px; position:relative; background:#000 url(bg_space.jpg); overflow:hidden; clear:both; }
jQuery
The animation is processor intensive since it loops every 1/100 of a second to make sure the animation is smooth.
function animateBg(obj,s,d){ if( typeof s === "undefined" ){ var s = parseFloat( $(obj).attr("data-speed") ); if( s === 0) { return false; } } if( typeof d === "undefined" ){ var d = $(obj).attr("data-direction"); } //set background-position if not exist if( typeof $(obj).css("background-position") === "undefined" ){ $(obj).css("background-position","0 0"); } var _bgPos = $(obj).css("background-position").split(" "); switch( d ){ case "up": var _x = 0; var _y = parseFloat(_bgPos[1]) - s; break; case "down": var _x = 0; var _y = parseFloat(_bgPos[1]) + s; break; case "left": var _x = parseFloat(_bgPos[0]) - s; var _y = 0; break; case "right": var _x = parseFloat(_bgPos[0]) + s; var _y = 0; break; } var _temp = $("<div></div>"); $(_temp).animate({ opacity:1 },10,function(){ $(obj).css("background-position", _x.toString()+" "+_y.toString() ); animateBg(obj,s,d); } ); }
You initialize the function by passing it the element object:
animateBg( $(".space") );
Put it all together and you can see the example here.
Tested in:
jQuery version 1.7.2, 1.8
FF 3.6+, Safari, Chrome, IE8+
iOS
Great books are available on JavaScript and jQuery
.
Not the answer you re looking for? Browse other questions tagged jquery background jquery-animate or ask your own question .