JQuery模糊动画

Question

当我单击按钮时，我使用以下脚本来模糊方框，但如何使模糊耗时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 1

只需将函数更改为：

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

演示

Answer 2

在css中，给#box一个转换：

#box{
  filter: blur(0);
 /* and the rest of it */
  transition: 0.5s;
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
}

Answer 3

使用javascript setTimeout:

setTimeout( function(){
    $(element)
          .css('filter',filterVal)
          .css('webkitFilter',filterVal)
          .css('mozFilter',filterVal)
          .css('oFilter',filterVal)
          .css('msFilter',filterVal);
   }, 500);

如果你使用的是jquery动画，你可以使用.delay((，但它不适用于不在动画队列中的css。

Answer 4

如果您真的想使用CSS3，请使用下面的框或文本：

#box {
width:100px;
height:100px;
animation-name: blurbox;
animation-duration: 5s;
animation-fill-mode: forwards;
/* Chrome, Safari, Opera */
-webkit-animation-name: blurbox;
-webkit-animation-duration: 5s;
-webkit-animation-fill-mode: forwards;
/* Standard syntax */
-moz-animation-name: blurbox;
-moz-animation-duration: 5s;
-o-animation-name: blurbox;
-o-animation-duration: 5s;
-o-animation-fill-mode: forwards;   
}
@-webkit-keyframes blurbox {
    0% { background-color:#f00;}
    100% { background-color:#f00; -webkit-filter: blur(50px);}
}
@-moz-keyframes blurbox {
    0% { background-color:#f00;}
    100% { background-color:#f00; -moz-filter: blur(50px); }
}
@keyframes blurbox {
    0% { background-color:#f00; }
    100% { background-color:#f00; filter: blur(50px); }
}

#text {
animation-name: blurtext;
animation-duration: 5s;
animation-fill-mode: forwards;
/* Chrome, Safari, Opera */
-webkit-animation-name: blurtext;
-webkit-animation-duration: 5s;
-webkit-animation-fill-mode: forwards;
/* Standard syntax */
-moz-animation-name: blurtext;
-moz-animation-duration: 5s;
-o-animation-name: blurtext; blurtext;
-o-animation-duration: 5s;
-o-animation-fill-mode: forwards;   
}
@-webkit-keyframes blurtext {
    0% { color: #000; }
    100% { text-shadow: 0px 0px 10px #000; color: transparent; }
}
@-moz-keyframes blurtext {
    0% { color: #000; }
    100% { text-shadow: 0px 0px 10px #000; color: transparent; }
}
@keyframes blurtext {
    0% { color: #000;}
    100% { text-shadow: 0px 0px 10px #000; color: transparent; }
}