user3596395 user3596395 - 1 month ago 8
CSS Question

JQuery Blur Animation

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>

Answer

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'
    });
}

DEMO