Question

当我点击按钮时，我使用以下脚本来模糊一个框，但是如何使模糊需要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>

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

DEMO

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

JQuery模糊动画

4 个答案: