How can I animate an image bluring?

Question

I would like to animate the bluring on image in JQuery

I have this image :

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

And I would like to do become this image more blur during 1 seconde.

Somethings like this :

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

But this don't works.

I'm waiting for your answer.

http://stackoverflow.com/questions/18211943/jquery-should-blur-fullscreen-background-image — Deepu--Java, Apr 28 '14 at 10:08
http://stackoverflow.com/questions/16781486/jquery-how-to-adjust-css-filter-blur — Prashant, Apr 28 '14 at 10:09

Richa · Answer 1 · 2014-04-28T10:21:28.603

0

Here is an example to blur image on hover using just CSS. Take a look at Fiddle

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

UPdate

Something like this Fiddle

edited Apr 28 '14 at 10:21

answered Apr 28 '14 at 10:10

Richa

3,261
2
27
51

But with JQuery ? Because I can do this with an CSS animation – Loïc Apr 28 '14 at 10:13
@ioh have a look at updated fiddle. Is this what you are looking for – Richa Apr 28 '14 at 10:22

score 0 · Accepted Answer · answered Apr 28 '14 at 10:22

I recommended the Richa's pure css solution, but here's the pure jQuery solution if you really want to:

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

How can I animate an image bluring?

2 Answers2