动画模糊滤镜 [英] Animate blur filter
问题描述
是否可以使用jQuery为CSS3模糊滤镜设置动画?
Is it possible to animate the CSS3 blur filter using jQuery?
这是应用CSS规则的静态方法:
This works as a static way of applying CSS rules :
item.css({'filter': 'blur('+blur+')','-webkit-filter': 'blur('+blur+')','-moz-filter': 'blur('+blur+')','-o-filter': 'blur('+blur+')','-ms-filter': 'blur('+blur+')'});
但是当我用animate方法替换css方法时,什么也没发生.
but when I replace the css method with the animate method, nothing happens.
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?
推荐答案
您可以对具有数值的变量使用.animate()
函数,并进行相应的动画处理-在每个步骤中调用一个函数并分配新的数值作为CSS过滤器的模糊半径属性:)
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 :)
$(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:
$(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.
请务必注意, Firefox (FF≥35及以上 不支持用于CSS3过滤器,因此无需使用-moz-
,-ms-
或-o-
前缀:)
It is important to note that Firefox (FF ≥35 and above supports unprefix CSS filters), IE and Opera has no support for CSS3 filters, so there is no need to use -moz-
, -ms-
or -o-
prefixes :)
请参阅小提琴: http://jsfiddle.net/teddyrised/c72Eb/(在更新之前)
See fiddle: http://jsfiddle.net/teddyrised/c72Eb/ (prior to update)
有关最新示例,请参见下面的代码段:
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>
这篇关于动画模糊滤镜的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!