All the examples I've found to do this assume you have a jpg or some other image without transparency, like this tutorial.
Now, if I applied that to a PNG with a shadow effect, the images are doubled up and the shadow effectively gets twice as dark.
If I fade out the primary image while the secondary image is fading out, there's a blinking effect, which can be minimized with a delay() on the fading out of the primary image, but it's still noticeable.
Without primary image fading: http://jsfiddle.net/ZKnKs/
Primary image fading without delay(): http://jsfiddle.net/ZKnKs/1/
Primary image fading with delay(): http://jsfiddle.net/ZKnKs/2/
For the last one, I can reduce the effect by not having the delay() in the mouseleave section, but not enough to my liking.
My question is, how can I have this be a smooth transition with no flashing but also have no doubling up of shadows?
I could separate the shadow into another image, but that seems like a rather inelegant workaround.
Thanks!
I'm pretty sure what I was asking is impossible.
What I wanted was to have an button from a sprite sheet such as this. to be able to smoothly fade to one state to the next regardless of these variables:
The problem if it's transparent, there'll always be some overlap (which could be fine if the part overlapping is the same color or opaque) or not at all, which causes a flash.
Or I could have it go rather slowly, like 1-2 second animations, which also does not work.
But usually there is a workaround.
