0

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 : )

Dan
  • 550
  • 4
  • 10
  • 21

3 Answers3

0

Found a very good plugin linked from the official jQuery bug tracking website, http://bugs.jquery.com/ticket/9621

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

http://github.com/louisremi/jquery.backgroundXY.js

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

tsega
  • 856
  • 2
  • 15
  • 31
0

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?

John Green
  • 13,241
  • 3
  • 29
  • 51
  • Hi John, it did, but with 1.4.2. I have also tried different ways of writing the code like backgroundPosition:"0px 0px" and backgroundPosition:"(0px 0px)" - they are the variations I have seen so far. – Dan May 17 '11 at 11:38
  • It'll be something like $('#el').css({backgroundPosition:'0px -40px'}); – John Green May 17 '11 at 11:40
  • the .css will just do a regular background position change though won't it? If all else fails I will try and use that as a fall back for the other browsers. Im just going to get hold of 1.5 from somewhere and try it on my site – Dan May 17 '11 at 11:46
  • Sorry yes. The idea though is that you'll need to build a quick animation engine using setTimeout... not pretty, but easy enough. If you want 1.5, just take it from Google Ajax libraries... that's what it is there for: https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js Just use the link to googleapis.com as your script src. – John Green May 17 '11 at 11:50
  • I just popped 1.5 up on my site, the slider and background animations work, but the lavalamp plugin I have on my nav is broken. Can't have it all eh? – Dan May 17 '11 at 11:59
  • Just tried another version. 1.5.1 makes everything work. I think jQuery is the nuts, but they could make it a little more consistent? I expect its just the plugins breaking, but something in the script must be different for some bits to work and other to break. Thanks for your time anyway... – Dan May 17 '11 at 12:04
0

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/

Sylvain
  • 3,823
  • 1
  • 27
  • 32
  • Hi, that works in opera and FF on mac too, but it uses 1.5? I would need to check if the slider on my site will work with 1.5 also. Why do you think 1.6 breaks it? – Dan May 17 '11 at 11:42
  • I didn't read the whole question -- you want it to work with jQuery 1.6 ! Unfortunately I have no idea why it does not work with jQuery 1.6 – Sylvain May 17 '11 at 11:49