使用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);