Question

我想在JQuery中为图像上的bluring设置动画

我有这张图片：

<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

以下是使用CSS在悬停时模糊图像的示例。请查看 Fiddle

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

<强> 更新

像这样Fiddle

Answer 2

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

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

如何为图像模糊设置动画？

2 个答案: