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

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


  • Top window's URL form inside of multiple nested cross-domain iFrames
  • Which is Android/Java corresponding method to the C#/C++ method GetTickCount()?
  • Javascript: parseInt() with trailing characters
  • How to make local USB port to work with Azure virtual machine
  • How to make Node.js handle multiple requests efficiently?
  • InputDispatcher Error
  • Why does Redshift need to do a full table scan to find the max value of the DIST/SORT key?
  • Background image does not show on iPhone/iPad
  • white-space: pre-wrap not working in IE
  • Why are my web pages zoomed in when I open them in Opera Mobile?
  • Absolutely positioned pseudo element inside table cell does not cover parent in IE9/10
  • Slow performance in hybrid AngularJS and Angular application in Safari
  • Implementing HMAC-SHA256 for Keybase in Javascript
  • Objective C - Create a framework for my iphone apps?
  • Cursor in wrong place in contenteditable
  • Which browser have this strange user agent? (IOS device)
  • Is it safe to drop the -webkit vendor prefix from the css3 border-radius yet?
  • PHP multiple file uploads
  • Javascript Array, Object, Date not defined
  • How to add closing tag for canvas in three js rendered Canvas?
  • Is there a way to set up a fallback for the formAction attribute in HTML5?
  • Problems with toDataURL HTML5 other ways to get canvas data?
  • AppleScript : find open tab in safari by name and open it
  • Django model inheritance, filtering models
  • How can I set a binding to a Combox in a UserControl?
  • Install PHP intl extension on MacOS
  • Does it make sense to call System.gc() and Thread.sleep() when working on Bitmaps?
  • Chrome doesn't support silverlight anymore? How to solve this?
  • Display issues when we change from one jquery mobile page to another in firefox
  • Ajax jQuery multiple calls at the same time - long wait for answer and not able to cancel
  • Problems to linebreak with an int in JLabel
  • Does CUDA 5 support STL or THRUST inside the device code?
  • R: gsub and capture
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Comma separated Values
  • Memory offsets in inline assembly
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • How can I remove ASP.NET Designer.cs files?
  • Are Kotlin's Float, Int etc optimised to built-in types in the JVM? [duplicate]
  • How to load view controller without button in storyboard?