Desaturation effect with jQuery and Pixastic

Question

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

I am trying to avoid saving two images and fading.

Answer 1

This seems to be possible with the canvas element.

Answer 2

... , . 1 livequery. , ... () . , , . chicagointerhandball.org ""

$('.sponsors').load(function() {    
    $('.sponsors').pixastic("desaturate");
}).each(function(index) {
    var clone = $(this).clone().removeClass('sponsors').addClass('sponsors-color').css('opacity',.25);
    $(this).parent().append(clone);
});

$('.sponsors-color').livequery(function(){ 
    // use the helper function hover to bind a mouseover and mouseout event 
        $(this).hover(function() { 
                $(this).stop().animate({"opacity": 1});
            }, function() { 
                $(this).stop().animate({"opacity": 0});
            }); 
    }, function() { 
        // unbind the mouseover and mouseout events 
        $(this) 
            .unbind('mouseover') 
            .unbind('mouseout'); 
    }); 

Answer 3

" ", , . . , , , , . , , .

Edit:

, . , , , , . , , , , , . .

Answer 4

, pixastic. .

Answer 5

, jQuery.

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

Answer 6

With this you need to mix jQuery and standard DOM calls. Today I had the same problem. I could not get the hang to work on the cross platform from the examples given here and on their website. So I decided to think about it myself. Come up with a solution, hoping it works for you:

http://you.arenot.me/2012/03/26/pixastic-desaturate-on-mouseover-mouseenter-mouseleave/