使用
Jquery可以动画化css3模糊滤镜吗？
这作为一种应用CSS规则的静态方式：
item.css({'filter': 'blur('+blur+')','-webkit-filter': 'blur('+blur+')','-moz-filter': 'blur('+blur+')','-o-filter': 'blur('+blur+')','-ms-filter': 'blur('+blur+')'});
item.animate({'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()可能不会正确地补充到最终值,如another answer below所示.在这种情况下,链接回调将永远更安全,手动将模糊半径设置为预期的最终值.我已经模块化了这些功能,以便可以重复使用,而不需要太多的冗余：
$(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,// 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',10);
});
重要的是要注意,Firefox(FF≥35及以上的supports unprefix CSS filters),IE和Opera都有no support for CSS3 filters,所以不需要使用-moz-,-ms-或-o前缀:)
见小提琴：http://jsfiddle.net/teddyrised/c72Eb/(更新前)
有关最新的示例,请参阅下面的代码段：
$(function() {
// Generic function to set blur radius of $ele
var setBlur = function(ele,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',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>
