jQuery模糊动画

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>

- user3596395

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

演示

- laaposto

---

我用了这个，它是最容易的。谢谢。 - user3596395

运行得非常好！ - Stef Hej

Answer 2

在 CSS 中，给 #box 添加一个过渡效果：

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

- Albzi

---

我赞同 @BeatAlex 的观点…… 我强烈建议使用 jQuery，仅将类添加到您想要进行过渡的元素中，然后让 CSS 处理工作。 - Pat Newell

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 不起作用。

- LightningShield

---

这不会创建动画。它只会在500毫秒后使元素模糊。 - laaposto

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

- Vaygon