Is it possible to create a jQuery background vertical animation that smoothly transitions the sprite position, giving the appearance of fading into the next position? Currently, my code (view demo jsfiddle link below) moves the sprite to the correct background position, but the movement is not smooth as desired.
I am looking to achieve a smooth/fading transition when hovering over the sprite. As it stands, the animation just pans down without any fading effect. Is there a way to create a mask or some other technique to achieve this effect? I am specifically interested in implementing this with a sprite rather than using two separate images.
You can view the current state of the animation here: http://jsfiddle.net/bluetidepro/jNDgT/
This is how I envision it should behave (with the addition of a jQuery animation): http://jsfiddle.net/bluetidepro/jNDgT/1/
If my explanation is unclear, please let me know and I will try to provide more clarity.