Still having problems with jQuery background animate - works in safari and IE, nothing else!

问题

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...

You can find the jsfiddle here

Many Thanks : )

回答1:

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?

回答2:

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);
});

http://jsfiddle.net/69hZY/4/