Question:

I made a thread a few days ago about animating a background image. I was advised to use a certain plugin which worked ok. I was using jQuery 1.4.2 - however, I have since been having real issues with the coda slider on my website. I then decided to change to the newest jQuery (1.6.1) and the issue was resolved. On the other hand my background animations broke in some browsers.

The weird thing is it works in safari on a mac, and ie9, 8, 7 and even 6 with a transparent png fix. It doesn't work for me in firefox on mac or pc and opera on mac.

Has anyone else had any problems like this? I spent some time making this images and would love to get it sorted! There must be some way round this, or maybe the code I have written it just plain wrong!?

I have made a fiddle with the actual images and script. It's the first one I have made so i'm not 100% sure I have done it right, feel free to say if it needs tweaking...

<a href="http://jsfiddle.net/g3legacy/69hZY/2/" rel="nofollow">You can find the jsfiddle here</a>

Many Thanks : )

Looks pretty. Won't work generally.

The issue is that background-position-x and background-position-y are not W3C spec. I know, I've run into the issue myself a few times.

You can get around this by manually creating a timer and manually rebuilding the background-position with its paired x/y values, but jQuery's animate won't work for you because background-position isn't a numeric value.

The background-position animate plugin didn't work for you?

This is working in FF4 using "background-position : x, y" instead of 2 separate properties :

$('.trans_bg').css({ backgroundPosition: "0 0" }); $('.trans_bg').hover( function() { $(this).stop().animate({ backgroundPosition: "0 -250" }, 500); }, function() { $(this).stop().animate({ backgroundPosition: "0 0" }, 400); });

<a href="http://jsfiddle.net/69hZY/4/" rel="nofollow">http://jsfiddle.net/69hZY/4/</a>

Found a very good plugin linked from the official jQuery bug tracking website, <a href="http://bugs.jquery.com/ticket/9621" rel="nofollow">http://bugs.jquery.com/ticket/9621</a>

Here is the link for the plugin on git hub, solved my problem with no fuss.

<a href="http://github.com/louisremi/jquery.backgroundXY.js" rel="nofollow">http://github.com/louisremi/jquery.backgroundXY.js</a>

Just so you know unless the browsers implement these properties, it would not be handled by the jquery core library. Hope this helps.