Is using jQuery with Pixastic possible?

Question

Hey!

I have a set of link images (HTML):

<a href="#"><img src="test.jpg /></a>
<a href="#"><img src="test2.jpg /></a>
<a href="#"><img src="test3.jpg /></a>

They are partially transparent (CSS):

#a img {
    border: 0;
    opacity: .2;  
}

They're getting less transparent on hover (jQuery):

$('a img').hover(
    function()
    {
        $(this).animate({opacity: 0.8,}, 200);
    });

The question is - how to add a blur on them using Pixastic (I don't want to use multiple layers and other hacks, just Pixastic)?

I know it works this way:

$(this).animate({opacity: 0.8,}, 200);
    $(this).pixastic("blur");

But I want to animate bluring. How to de-blur (and I don't mean sharpen()) on mouseout?

I'm trying:

 $('# img').mouseout(
    function()
    {
        $(this).animate({opacity: 0.2}, 400);   
        $(this).pixastic("sharpen");
    });

But the pixastic thing doesn't seem to work on mouseouts. I know I'm interrupting jQuery's animation process, but don't know how to handle it.

Answer 1

The problem with Pixastic is that it always replaces your original photo. But you can just easily create your own blur animation effect with canvas. Inside your link-element you need to place a canvas copy of the image-element. Changing the pixeldata to get a blur effect isn't very hard.

I think i just created a Dojo version of the effect you want in jQuery. You can see it here: http://westendorp.name/index.php?category=coding&page=coding/imageEffects I don't think it's hard to port this to jQuery though.