Using jQuery to animate from one CSS class to another, specifically the background-image attribute?

I开发者_Go百科 have two CSS classes like this:

.active {
    background-image: url(active.png);
    opacity: 1;
}

.inactive {
    background-image: url(inactive.png);
    opacity: .5;
}

I'd like to call a function that will transition from one background image to another, and also handle the opacity change as well. Ideally it would be a jQuery call like this:

$('.active').animate('.inactive', 500); // 500 is the duration of the animation

Is there anything out there that does this in a simple, non-bloated way? I'm imagining transitioning from one background image to another would be a simple cross fade over 500ms. Is this even possible with a single element?

If no one knows of an existing solution that they personally believe is elegant and would stand behind, I'd love to write the code myself and have everyone peer review it. It would be great if John Resig himself wrote a plugin like this (e.g., color animations). ;)

I believe this question is fundamentally different from the other questions about animating from one CSS class to another, because the other questions I found do not address the background-image attribute.

I doubt that it would be possible. I assume that current implementation of animation simply take start and value of a CSS style attribute and then in a loop apply all the intermediate values of the attribute to create the animation effect.

What will be the intermediate values for the background-image attribute?

One possible solution could be to write your own animation function using HTML5 canvas. This would not be a CSS based solution so your users will need latest browsers to see the animation in action.

EDIT: Re-reading your question I realized you are not talking about morphing one image to another. The simple fade-in/fade-out, which you seems to be after, might be possible with CSS alone.

Take a look at JQueryUI.switchClass I guess it's what's you're looking for. It makes an object transition smoothly from .class1 to .class2