动画模糊滤镜
是否可以使用jQuery动画CSS3模糊filter？
这作为应用CSS规则的静态方式：
item.css({'filter': 'blur('+blur+')','-webkit-filter': 'blur('+blur+')','-moz-filter': 'blur('+blur+')','-o-filter': 'blur('+blur+')','-ms-filter': 'blur('+blur+')'}); 但是当我用animate方法替换css方法时，没有任何反应。
item.animate({'filter': 'blur('+blur+')','-webkit-filter': 'blur('+blur+')','-moz-filter': 'blur('+blur+')','-o-filter': 'blur('+blur+')','-ms-filter': 'blur('+blur+')'},500);
有没有我不知道的伎俩？ 如何设置项目的模糊度？
您可以对具有数值的变量使用.animate()函数，并相应地设置动画 – 在每个步骤中调用函数并将该新数值指定为CSS滤镜模糊半径属性:)
$(function() { $({blurRadius: 0}).animate({blurRadius: 10}, { duration: 500, easing: 'swing', // or "linear" // use jQuery UI or Easing plugin for more options step: function() { console.log(this.blurRadius); $('.item').css({ "-webkit-filter": "blur("+this.blurRadius+"px)", "filter": "blur("+this.blurRadius+"px)" }); } }); });
次要更新 ：jQuery的.animate()可能无法正确补间到最终值，如下面的另一个答案中所述 。 在这种情况下，链接一个手动将模糊半径设置为预期最终值的回调总是更安全。 我已将这些function模块化，以便可以重复使用而不会有太多冗余：
$(function() { // Generic function to set blur radius of $ele var setBlur = function(ele, radius) { $(ele).css({ "-webkit-filter": "blur("+radius+"px)", "filter": "blur("+radius+"px)" }); }, // Generic function to tween blur radius tweenBlur = function(ele, startRadius, endRadius) { $({blurRadius: startRadius}).animate({blurRadius: endRadius}, { duration: 500, easing: 'swing', // or "linear" // use jQuery UI or Easing plugin for more options step: function() { setBlur(ele, this.blurRadius); }, callback: function() { // Final callback to set the target blur radius // jQuery might not reach the end value setBlur(ele, endRadius); } }); }; // Start tweening tweenBlur('.item', 0, 10); });
您可以在下面附带的代码段中看到此更新后的代码。
重要的是要注意Firefox （FF≥35及以上版本支持前缀CSSfilter ），IE和Opera 不支持 CSS3filter ，因此不需要使用-moz- ， – -ms-或-o-前缀:)
请参阅小提琴： http ： //jsfiddle.net/teddyrised/c72Eb/ （更新前）
有关最新示例，请参阅下面的代码段：
$(function() { // Generic function to set blur radius of $ele var setBlur = function(ele, radius) { $(ele).css({ "-webkit-filter": "blur("+radius+"px)", "filter": "blur("+radius+"px)" }); }, // Generic function to tween blur radius tweenBlur = function(ele, startRadius, endRadius) { $({blurRadius: startRadius}).animate({blurRadius: endRadius}, { duration: 500, easing: 'swing', // or "linear" // use jQuery UI or Easing plugin for more options step: function() { setBlur(ele, this.blurRadius); }, complete: function() { // Final callback to set the target blur radius // jQuery might not reach the end value setBlur(ele, endRadius); } }); }; // Start tweening towards blurred image window.setTimeout(function() { tweenBlur('.item', 0, 10); }, 1000); // Reverse tweening after 3 seconds window.setTimeout(function() { tweenBlur('.item', 10, 0); }, 3000); });
Sample text that will be blurred.
一个谷歌搜索查询给了我这个结果你可能想看看。 我建议做的只是在JS中切换一个类并处理CSS中的其余类，例如：
var $item = $('.item'); // or any selector you want to use $item.addClass('item--blur');
处理CSS中的其余部分：
.item { transition: all 0.25s ease-out; } .item--blur { // all your filters }
我尝试了Terry的答案，这个答案很有效，直到我尝试将该过程反转为动画模糊效果的去除。 该过程以0.0815133px的模糊结束，而不是以0的模糊结束。 大多数浏览器似乎将这个降低到零，但iOS没有，并在页面上留下明显的模糊。 通过手动将模糊设置为零来修改动画后，修复此问题：
$('.item').css({ "-webkit-filter": "blur(0)", "filter": "blur(0)" });