Take the 2-minute tour ×

How do I make a jQuery background vertical animation that masks the transition to make the appearance of the sprite fading to the next position? My current code (see jsfiddle link below for demo) animates the sprite to the correct background position but when it does it, you can see the sprite moving top to bottom, then back to the top.

I want the transition to be smooth/fading so that when you hover it, it fades in the transition. Currently, it just pans down. Not sure if you can make some sort of mask or something? I want to do this with the sprite, I already know it is possible to do with 2 separate images.

Here is a demo of the current state it is in: http://jsfiddle.net/bluetidepro/jNDgT/

Here is how I WANT it to act (but with a jQuery animation added): http://jsfiddle.net/bluetidepro/jNDgT/1/

I can try to explain better if that doesn't make sense.

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

This should do the trick:

And here's an article explaining it:

share|improve this answer
That works perfectly! Exactly what I was looking for! Thanks so much, Mike! –  Zach Reed Jun 1 '12 at 15:13
add comment

Your Answer


