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?

Solution 1

Or you can use css-sprite

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

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

Solution 2

jQuery Plugin for background Position