如何设置模糊图像的动画

Question

我想在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);

但这行不通。

我在等你的答复。

Answer 1

我推荐了Richa的纯css解决方案，但如果你真的想的话，这里是纯jQuery解决方案：

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

Answer 2

下面是一个仅使用CSS在悬停时模糊图像的示例。看看Fiddle

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

更新日期

类似Fiddle 的东西