在jquery中动画css模糊过滤器 [英] animate css blur filter in jquery

问题描述

是否可以使用Jquery为css3模糊过滤器设置动画？

Is it possible to animate the css3 blur filter using Jquery?

这是一个应用CSS规则的静态方法：

this works as a static way of applying css rules :

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

但是当我用animate方法替换css方法时，没有什么发生...

but when I replace the css method with the animate method, nothing happens...

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

有没有骗子我不知道？

Is there a trick I'm unaware of? how can I animate the blurriness of an item?

推荐答案

您可以使用 .animate / code>对数值的变量进行函数，并相应地进行动画处理 - 在每个步骤期间调用函数，并将该新的数值指定为CSS过滤器模糊半径属性：）

You can use the .animate() function on a variable that is of numerical value, and animate accordingly - call a function during each step and assign that new numerical value as a CSS filter blur radius property :)

$(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)"
            });
        }
    });
});

请务必注意， Firefox （FF≥35及以上< a href =http://www.eweek.com/enterprise-apps/firefox-35-gets-performance-boost-bug-fixes.html>支持unprefix CSS过滤器），IE和Opera有< a href =http://caniuse.com/css-filters> 不支持用于CSS3过滤器，因此不需要使用 -moz- ， -ms - 或 -o - 前缀:)

It is important to note that Firefox (FF ≥35 and above supports unprefix CSS filters), IE and Opera has no support for CSS3 filters, so there is no need to use -moz-, -ms- or -o- prefixes :)

http://jsfiddle.net/teddyrised/c72Eb/

这篇关于在jquery中动画css模糊过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！