jQuery Animated Gaussian Blur

Question

On the home page of a website I'm designing, I'd like the initial hero image to animate from blurred (gaussian) to sharp. I've looked around, and have been surprised that there's not a readily obvious jQuery solution for doing this. Am I missing something?

Since I'm already loading the jQuery core for other things on the web site, I'd really like it to utilize jQuery. I found this example, but it's using YUI, and I'd rather not load YUI on top of jQuery just for this effect.

Answer 1

How about creating your blur effect in a photo-editing program and then fading between the blurred image and the non-blurred image:

jQuery(function ($) {
    $('#blurred_image, #focused_image').fadeToggle(1500, function () {
        //this callback function could be used to show a message or whatever else...
    });
});

Here is a jsfiddle: http://jsfiddle.net/jasper/2FZ3Z/1/ (note you need to click on the image to trigger the transition from blurred to non-blurred image).

Another way to de-blur an image would be to position the same image over itself, move it a few pixels, and change its opacity so the user can see the original image underneath. Then animate the overlay image. This appears more like linear blur rather than Gaussian however.

Here's a jsfiddle: http://jsfiddle.net/jasper/FTt3b/ (click the image to animate away the blur).