Как я могу анимировать размывание изображения?

Question

Как я могу анимировать размывание изображения?

0

Я хотел бы оживить смазывание изображения в JQuery

У меня есть этот образ:

<img id="right" class="vote" src="css/images/no.png" alt="no button" onclick="vote(0)">

И я хотел бы сделать это изображение более размытым в течение 1 секунды.

Такие вещи:

$("#right").animate({"-webkit-filter":"blur(30px)"},1000);

Но это не работает.

Я жду Вашего ответа.

Loïc 28 апр. 2014, в 12:16

Источник

0

Сначала напишите свой код
Richa 28 апр. 2014, в 10:07
0

stackoverflow.com/questions/18211943/...
Deepak Tiwari 28 апр. 2014, в 10:08
0

stackoverflow.com/questions/16781486/...
Prashant 28 апр. 2014, в 10:09
0

Спасибо, но я хотел бы анимировать с JQuery
Loïc 28 апр. 2014, в 10:16

Показать ещё 2 комментария

Теги:

java

jquery

html

css

blur

2 ответа

0

Вот пример размытия изображения при наведении с использованием только CSS. Взгляните на Fiddle

#css-filter-blur:hover { -webkit-filter: blur(2px); filter: url(#blur-effect-1); }

Обновить

Что-то вроде этой скрипки

Richa 28 апр. 2014, в 07:38

0

Но с JQuery? Потому что я могу сделать это с помощью анимации CSS
Loïc 28 апр. 2014, в 10:13
0

@ioh взгляните на обновленную скрипку. Это то, что вы ищите
Richa 28 апр. 2014, в 10:22

Ещё вопросы

Спасибо, но я хотел бы анимировать с JQuery
Но с JQuery? Потому что я могу сделать это с помощью анимации CSS
@ioh взгляните на обновленную скрипку. Это то, что вы ищите

Hereblur · Accepted Answer · 2014-04-28T07-58-00.000Z

Я рекомендовал решение Rich Cc для Richa, но вот чистое решение jQuery, если вы действительно хотите:

   $("#right").animate({blurRadius: 30}, {
        duration: 1000,
        step: function() {
            $(this).css({
                "-webkit-filter": "blur("+this.blurRadius+"px)"
            });
        }
    });

Это именно то, что мне нужно, спасибо