Animate Blur Filter

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

Solution 1:

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 optionsstep: function() {
            console.log(this.blurRadius);
            $('.item').css({
                "-webkit-filter": "blur("+this.blurRadius+"px)",
                "filter": "blur("+this.blurRadius+"px)"
            });
        }
    });
});

---

Minor update: jQuery's .animate() might not tween to the final value correctly, as noted in another answer below. In this case, it is always safer to chain a callback that manually sets the blur radius to the intended final value. I have modularised the functions so that it can be reused without too much redundancies:

$(function() {
        // Generic function to set blur radius of $elevar 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,
                easing: 'swing', // or "linear"// use jQuery UI or Easing plugin for more optionsstep: function() {
                    setBlur(ele, this.blurRadius);
                },
                callback: function() {
                    // Final callback to set the target blur radius// jQuery might not reach the end valuesetBlur(ele, endRadius);
                }
            });
        };

    // Start tweeningtweenBlur('.item', 0, 10);
});

You can see this updated code in action in the attached code snippet below.

---

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 :)

See fiddle: http://jsfiddle.net/teddyrised/c72Eb/ (prior to update)

See code snippet below for the most up-to-date example:

$(function() {
        // Generic function to set blur radius of $elevar 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,
                easing: 'swing', // or "linear"// use jQuery UI or Easing plugin for more optionsstep: function() {
                    setBlur(ele, this.blurRadius);
                },
                complete: function() {
                    // Final callback to set the target blur radius// jQuery might not reach the end valuesetBlur(ele, endRadius);
               }
           });
        };
    
    // Start tweening towards blurred imagewindow.setTimeout(function() {
        tweenBlur('.item', 0, 10);
    }, 1000);
    
    // Reverse tweening after 3 secondswindow.setTimeout(function() {
        tweenBlur('.item', 10, 0);
    }, 3000);
});

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

Solution 2:

One Google Search query gave me this result you might wanna take a look at. What I suggest to do is only toggle a class in your JS and handle the rest in your CSS, for instance:

var$item = $('.item'); // or any selector you want to use$item.addClass('item--blur');

Handle the rest in your CSS:

.item {
    transition: all 0.25s ease-out;
}
.item--blur {
    // all your filters
}

Solution 3:

I tried Terry's answer, which worked great until I tried reversing the process to animate the removal of the blur effect. Instead of ending with a blur of 0, the process ended with a blur of 0.0815133px. Most browsers seemed to round this down to zero, but iOS didn't and left a noticeable blur on the page. Following the animated change by manually setting the blur to zero fixed this:

$('.item').css({
  "-webkit-filter": "blur(0)",
  "filter": "blur(0)"
});

Solution 4:

try this simple solution:

functionsleep(ms) {
    returnnewPromise(resolve =>setTimeout(resolve, ms));
}
asyncfunctionapplyBlurFilter() {
    for (var i = 1 ; i <= 100; i++) {
        $('h1').css({ "filter": "blur(" + i/10 + "px)" });
        awaitsleep(40); //4 seconds (40 * 100 / 10)
    }
}

$(document).ready(function(){
  applyBlurFilter();
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><h1>
  This Text is going to be blured. 
</h1>