jQuery 动画模糊滤镜
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20082283/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animate blur filter
提问by Vincent Duprez
Is it possible to animate the CSS3 blur filter using jQuery?
是否可以使用 jQuery 为 CSS3 模糊过滤器设置动画？
This works as a static way of applying CSS rules :
这是应用 CSS 规则的静态方式：
item.css({'filter': 'blur('+blur+')','-webkit-filter': 'blur('+blur+')','-moz-filter': 'blur('+blur+')','-o-filter': 'blur('+blur+')','-ms-filter': 'blur('+blur+')'});
but when I replace the css method with the animate method, nothing happens.
但是当我用 animate 方法替换 css 方法时，没有任何反应。
item.animate({'filter': 'blur('+blur+')','-webkit-filter': 'blur('+blur+')','-moz-filter': 'blur('+blur+')','-o-filter': 'blur('+blur+')','-ms-filter': 'blur('+blur+')'},500);
Is there a trick I'm unaware of? How can I animate the blurriness of an item?
有什么我不知道的技巧吗？如何为项目的模糊度设置动画？
回答by Terry
You can use the .animate()function on a variable that is of numerical value, and animate accordingly - call a function during each step and assign that new numerical value as a CSS filter blur radius property :)
您可以.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)"
});
}
});
});
Minor update: jQuery's .animate()might not tween to the final value correctly, as noted in another answer below. In this case, it is always safer to chain a callback that manually sets the blur radius to the intended final value. I have modularised the functions so that it can be reused without too much redundancies:
次要更新：jQuery.animate()可能不会正确地补间到最终值，如下面的另一个答案所述。在这种情况下，链接一个手动将模糊半径设置为预期最终值的回调总是更安全。我已经模块化了功能，以便它可以在没有太多冗余的情况下重复使用：
$(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);
});
You can see this updated code in action in the attached code snippet below.
您可以在下面附加的代码片段中看到此更新后的代码。
It is important to note that Firefox(FF ≥35 and above supports unprefix CSS filters), IE and Opera has no supportfor CSS3 filters, so there is no need to use -moz-, -ms-or -o-prefixes :)
需要注意的是Firefox（FF≥35及以上支持无前缀CSS过滤器），IE和Opera不支持CSS3过滤器，所以不需要使用-moz-，-ms-或-o-前缀：）
See fiddle: http://jsfiddle.net/teddyrised/c72Eb/(prior to update)
见小提琴：http: //jsfiddle.net/teddyrised/c72Eb/（更新前）
See code snippet below for the most up-to-date example:
有关最新示例，请参阅下面的代码片段：
$(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);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<p>Sample text that will be blurred.</p>
<img src="http://placehold.it/500x500" />
</div>回答by meavo
One Google Search query gave me this resultyou might wanna take a look at. What I suggest to do is only toggle a class in your JS and handle the rest in your CSS, for instance:
一个 Google 搜索查询给了我这个结果，你可能想看看。我建议做的只是在你的 JS 中切换一个类并在你的 CSS 中处理其余的类，例如：
var $item = $('.item'); // or any selector you want to use
$item.addClass('item--blur');
Handle the rest in your CSS:
处理 CSS 中的其余部分：
.item {
transition: all 0.25s ease-out;
}
.item--blur {
// all your filters
}
回答by scribacious
I tried Terry's answer, which worked great until I tried reversing the process to animate the removal of the blur effect. Instead of ending with a blur of 0, the process ended with a blur of 0.0815133px. Most browsers seemed to round this down to zero, but iOS didn't and left a noticeable blur on the page. Following the animated change by manually setting the blur to zero fixed this:
我尝试了 Terry 的答案，在我尝试反转该过程以动画化去除模糊效果之前，该答案非常有效。该过程不是以 0 的模糊结束，而是以 0.0815133 像素的模糊结束。大多数浏览器似乎将其舍入为零，但 iOS 没有并在页面上留下明显的模糊。通过手动将模糊设置为零来修复动画变化：
$('.item').css({
"-webkit-filter": "blur(0)",
"filter": "blur(0)"
});
回答by Behnam
try this simple solution:
试试这个简单的解决方案：
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function applyBlurFilter() {
for (var i = 1 ; i <= 100; i++) {
$('h1').css({ "filter": "blur(" + i/10 + "px)" });
await sleep(40); //4 seconds (40 * 100 / 10)
}
}
$(document).ready(function(){
applyBlurFilter();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
This Text is going to be blured.
</h1>