Hover effects using sprites and fades in jQuery

Question

Hi All,

I would love to know how this is being achieved. I use sprites for the hover to change the look and feel of a button background by shifting the background position of the image on hover of an tag.

How though, would I get this right using jQuery?

http://dragoninteractive.com/

Many thanks!

Answer 1

I would suggest using the jQuery fadeIn() method.

If you set the background image as the grey background, and then fade in the other blue image on mouse over your should get the effect you are looking for.

Answer 2

$('yourelementselector').css('background-position', 'new value');

But why use jQuery to update the background-position? Just use CSS:

courselector:hover {
    background-position: newval;
}

EDIT: Oh, sorry. Link at first didn't load. There is a jQuery-Plugin or Tutorial explaining this fading animation!