Desaturate effect with jQuery and Pixastic

Question

Does anyone know how to use the Pixastic plugin and jQuery to where I could have an image fade from color to completely desaturated?

I am trying to avoid saving out two images and fading one out..

Answer 1

You should be able to, it is in their jQuery documentation section.

// convert all images with class="photo" to greyscale
$(".photo").pixastic("desaturate");

Answer 2

Since all those pixastic image effects are generated on the fly I don't think it would be feasible to fade between saturated and desaturated. The saturation level of the image would have to be redrawn at each step of the fade. Your best bet would probably be to have two images, one saturated and one desaturated, and have them placed on top of one another. Then when you hover over one, fade in the other image.

Edit:

Just saw that you were trying to avoid having two images. Well, that's the only solution I can think of but I'd love to see if there were others. Depending on how many images there are, you could generate all the desaturated images on page load, place them on top of saturated images, hide them, and then fade them in on hover. Just a possibility.

Answer 3

you could get the best of both worlds by dynamically creating a duplication and desaturating that image with pixastic. Position the new desaturated image under the original and fade the original out.