The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a map of CSS properties. [...] All animated properties should be numeric (except as noted below); properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)

I think you will have to have IMG elements for the images, then you can crossfade them using fadeIn and fadeOut.

force
—
2010-07-19T22:29:43Z —
#3

Somehow, I don't think an IMG element will work well inside of a button element as a background.

Guess I'll have to skip this one if that's the only way.

Raffles
—
2010-07-19T23:01:12Z —
#4

Or have two buttons, absolutely positioned on top of each other.

SlickAU
—
2010-07-20T05:50:14Z —
#5

You could fade the original background to about 5% or some low amount and then change the background source to the new image already set to the say 5% opacity then fade it in to 100%.

Raffles
—
2010-07-20T16:17:52Z —
#6

No, you can't fade backgrounds because you can't change the opacity of a CSS background image. You can only affect the opacity of entire DOM elements.

force
—
2010-07-20T21:50:23Z —
#7

Using two buttons--that means you might run into the issue of having two buttons with the same name attribute.

Raffles
—
2010-07-20T22:41:26Z —
#8

Not really, one of them can just not have a name attribute at all. You can generate the extra button with JavaScript, and remove one button after the crossfading is done.

force
—
2010-07-21T20:50:39Z —
#9

What if it's clicked during the crossfade?

nevermind. Only the element that appears as the result of the crossfade would be clicked.

Then again, what would you specify if javascript were disabled?

Raffles
—
2010-07-21T21:15:41Z —
#10

If javascript is disabled, you just have one button with no fancy effects (or just one image). If JavaScript is enabled, it creates the second button, adds the second image and adds the event listeners for the crossfade effect.