Jquery Animate Background Image Transition

Question

I have a navigation bar that when hovering over an item, the background image is changed, that works fine. However, I would like this image to slide in from the top, and slide back up when you stop hovering. I've been trying to do this with JQuery, using css bacgroundImage and sliding or toggling, but none of that seems to work. How can I do this using Jquery?

Answer 1

jQuery Plugin for background Position

Answer 2

Or you can use css-sprite

http://snook.ca/archives/javascript/jquery-bg-image-animations/

demo: http://snook.ca/technical/jquery-bg/

Answer 3

@Snook css-sprite: the code is depreciated. It doens't seem to work with recent jquery libraries.