jquery slow apply css class onhover

Question

hello,

current situation: i have an <a href=""></a> which has a css background image. in css i have the :hover pseudo class to change the backgroundposition.

i would like to fadeIn and fadeOut the two different backgroundimages with jquery

i do not have to animate the backgroundposition, but fadeIn and fadeOut two different css classes. is that possible? or do i need an other approach?

thanks in advanced!

Answer 1

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.

Answer 2

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.

Answer 3

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.