JQuery模糊动画

我使用下面的脚本来模糊一个框，当我点击一个按钮，但我怎样才能让模糊需要500ms？JQuery模糊动画

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

来源

2014-05-02 user3596395

只要改变你的函数是：

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

来源

2014-05-02 13:44:54 laaposto

我用过这个，它是最简单的。谢谢 – user3596395

工程就像一个魅力！ –

在CSS中，给#box过渡：

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

来源

2014-05-02 13:41:28 Albzi

我与你@BeatAlex ......我强烈建议使用jQuery只需添加一个类的元素您希望在其上进行转换并让CSS完成工作。 –

使用JavaScript的setTimeout：

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

如果您使用的是jQuery动画，您可以使用.delay（），但它不适用于不在动画队列中的css。

来源

2014-05-02 13:45:08 LightningShield

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

如果你真的想使用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; } 
}

来源

2014-05-02 15:59:54 Vaygon

JQuery模糊动画

回答

相关问题