javascript - JQuery 模糊动画

当我单击一个按钮时，我正在使用以下脚本来模糊一个框，但是如何使模糊需要 500 毫秒？

$(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>

最佳答案

只需将您的功能更改为:

 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