Animate background-position with jQuery


There are some pretty nice things you can do with background-image animations, but it doesn't work with an out-of-the box version of jQuery at the time of writing. One better known solution to do this is presented by Jonathan Snook in Using jQuery for background image animations. The demo page shows, that some very appealing effects are possible with very simple means.

Jonathan's implementation relies on a jQuery Plugin by Alexander Farkas (src) which is pretty outdated by now. For example, it doesn't work well together with IE9.

Looking for a more up to date and elegant solution, I stumbled upon jQuery's built in CSS Hooks that allow to extend jQuery.css() by defining custom methods to get and set CSS values. Some searching revealed that a very handy implementation of a CSS hook for background-position already exists on github.

It works with all tested browses so far (including IE 6+ and everything up to date) allows for animating x- and y-axis separately and is easier to use and more performantly than the script mentioned before. Have a look at the source of this page to see how it is done.


Ut et luctus nisl. Vestibulum pharetra orci ut dui tempus sed viverra sapien congue. Proin eu magna metus, sed elementum risus. Curabitur luctus lectus id elit commodo sodales. Aenean consectetur fringilla quam quis pulvinar. Hover me!