JQuery模糊动画 [英] JQuery Blur Animation
本文介绍了JQuery模糊动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我点击按钮时,我使用以下脚本来模糊一个框,但是如何使模糊需要500毫秒?
I'm using the following script to blur a box when I click a button, but how can I make the blur take 500ms?
$(document).ready(function() {
//attach click event to button
$('.button').click(function(){
//when button is clicked we call blurElement function
blurElement("#box", 2);
});
//attach click event to button
$('.button2').click(function(){
//when button is clicked we disable the blur
blurElement("#box", 0);
});
});
//set the css3 blur to an element
function blurElement(element, size){
var filterVal = 'blur('+size+'px)';
$(element)
.css('filter',filterVal)
.css('webkitFilter',filterVal)
.css('mozFilter',filterVal)
.css('oFilter',filterVal)
.css('msFilter',filterVal);
}
</script>
推荐答案
只需将您的功能更改为:
Just change your function to this:
function blurElement(element, size) {
var filterVal = 'blur(' + size + 'px)';
$(element).css({
'filter':filterVal,
'webkitFilter':filterVal,
'mozFilter':filterVal,
'oFilter':filterVal,
'msFilter':filterVal,
'transition':'all 0.5s ease-out',
'-webkit-transition':'all 0.5s ease-out',
'-moz-transition':'all 0.5s ease-out',
'-o-transition':'all 0.5s ease-out'
});
}
这篇关于JQuery模糊动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文