How to use fadeIn/fadeOut when link pseudo classes change?

I have an <a href=""></a> which has a CSS background image. In CSS, I have the :hover pseudo class to change the background-position.

I would like to fadeIn and fadeOut the two different backgroundimages with jQuery. I do not want to animate the backgroundposition, but fadeIn and fadeOut two diffe开发者_如何学Gorent CSS classes.

Is this possible? Or do I need another approach?

This is not possible purly in jQuery. You can, however, take a look at jQuery UI for this purpose (not sure it works either).

See http://jqueryui.com/

Another solution is, as the other answers says, to overlay two divs and animate the opacity.

You'll need to stack two elements, and apply one of the background images to each. Then you can just fade in/out the top element.

You won't be able to do that with plain CSS or with stock jQuery. To fade the background images, you'd have to put two elements on top of each other, and then fade out the top element. It can't be done in the one element.