Возможно ли использование jQuery с Pixastic? - PullRequest
Новая
       13

Возможно ли использование jQuery с Pixastic?

0 голосов
/ 13 сентября 2010

У меня есть набор изображений ссылок ( 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");

Но я хочу оживить размывание.Как убрать размытость (и я не имею в виду резкость ()) при наведении мышки?

Я пытаюсь: 

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

Но пиксельная вещь не работает наmouseouts.Я знаю, что прерываю процесс анимации в jQuery, но не знаю, как с этим справиться.

Ответы [ 2 ]

2 голосов
/ 04 октября 2012

Надеюсь, это кому-нибудь поможет: просто анимируйте цепочку за пикселем. 

   $(this).pixastic("sharpen").animate({opacity: 0.2}, 400);
0 голосов
/ 17 сентября 2010

Проблема с Pixastic заключается в том, что он всегда заменяет исходную фотографию. Но вы можете легко создать собственный эффект размытия с помощью canvas. Внутри вашего элемента link вам нужно разместить холст копию элемента image. Изменение пиксельных данных для получения эффекта размытия не очень сложно.

Я думаю, что я только что создал Dojo-версию эффекта, который вы хотите в jQuery Вы можете увидеть это здесь: http://westendorp.name/index.php?category=coding&page=coding/imageEffects Я не думаю, что это трудно портировать это на JQuery, хотя.

...