Vincent Duprez Vincent Duprez - 4 months ago 52
jQuery Question

animate css blur filter in jquery

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

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


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?

Answer

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

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/

Comments