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.

Answer 1

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)"
            });
        }
    });

Answer 2

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