jQuery中的动画css模糊过滤器

item.css({'filter': 'blur('+blur+')','-webkit-filter': 'blur('+blur+')','-moz-filter': 'blur('+blur+')','-o-filter': 'blur('+blur+')','-ms-filter': 'blur('+blur+')'});

item.animate({'filter': 'blur('+blur+')','-ms-filter': 'blur('+blur+')'},500);

您可以在数值变量上使用.animate()函数,并相应地生成动画 – 在每个步骤中调用函数,并将该新数值分配为CSS过滤器模糊半径属性:)

$(function() {
    $({BlurRadius: 0}).animate({BlurRadius: 10},{
        duration: 500,easing: 'swing',// or "linear"
                         // use jQuery UI or Easing plugin for more options
        step: function() {
            console.log(this.blurRadius);
            $('.item').css({
                "-webkit-filter": "blur("+this.blurRadius+"pX)","filter": "blur("+this.blurRadius+"pX)"
            });
        }
    });
});

次要更新：jQuery的.animate()可能不会正确地补充到最终值,如another answer below所示.在这种情况下,链接回调将永远更安全,手动将模糊半径设置为预期的最终值.我已经模块化了这些功能,以便可以重复使用,而不需要太多的冗余：

$(function() {
        // Generic function to set blur radius of $ele
    var setBlur = function(ele,radius) {
            $(elE).css({
               "-webkit-filter": "blur("+radius+"pX)","filter": "blur("+radius+"pX)"
           });
       },// Generic function to tween blur radius
       tweenBlur = function(ele,starTradius,endRadius) {
            $({BlurRadius: starTradius}).animate({BlurRadius: endRadius},{
                duration: 500,// or "linear"
                                 // use jQuery UI or Easing plugin for more options
                step: function() {
                    setBlur(ele,this.blurRadius);
                },callBACk: function() {
                    // Final callBACk to set the target blur radius
                     // jQuery might not reach the end value
                     setBlur(ele,endRadius);
                }
            });
        };

    // Start tweening
    tweenBlur('.item',10);
});

您可以在下面附加的代码段中看到这个更新的代码.

重要的是要注意,Firefox(FF≥35及以上的supports unprefix CSS filters),IE和Opera都有no support for CSS3 filters,所以不需要使用-moz-,-ms-或-o前缀:)

见小提琴：http://jsfiddle.net/teddyrised/c72Eb/(更新前)

有关最新的示例,请参阅下面的代码段：

$(function() {
        // Generic function to set blur radius of $ele
    var setBlur = function(ele,complete: function() {
                    // Final callBACk to set the target blur radius
                    // jQuery might not reach the end value
                    setBlur(ele,endRadius);
               }
           });
        };
    
    // Start tweening toWARDs blurred image
    window.setTimeout(function() {
        tweenBlur('.item',10);
    },1000);
    
    // Reverse tweening after 3 seconds
    window.setTimeout(function() {
        tweenBlur('.item',10,0);
    },3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
    <p>Sample text that will be blurred.</p>
    <img src="http://placehold.it/500x500" />
</div>