使用Pixastic可以使用jQuery吗？

Question

我有一组链接的图像（HTML）的：

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

他们是部分透明的（CSS）：

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

他们相处得少悬停透明（的jQuery）：

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

问题是 - 如何使用Pixastic添加模糊效果（我不想使用多个图层和其他黑客，只是Pixastic）？

我知道它的工作原理是这样的：

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

但我想动画bluring。如何去掉模糊（并且我不是指锐化（））在mouseout上？

我想：

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

但pixastic事情似乎并没有对mouseouts工作。我知道我正在中断jQuery的动画过程，但不知道如何处理它。

Answer 1

Pixastic的问题是它总是替换你的原始照片。但您可以使用画布轻松创建自己的模糊动画效果。在链接元素内部，您需要放置图像元素的画布副本。更改像素数据以获得模糊效果并不难。

我想我只是创造了你的jQuery想要的效果道场版本。你可以在这里看到：http://westendorp.name/index.php?category=coding&page=coding/imageEffects 我不认为这是很难端口这jQuery的虽然。

Answer 2

希望这将帮助别人：刚刚连锁pixastic后动画。

$(this).pixastic("sharpen").animate({opacity: 0.2}, 400);