Can anyone think of a way to simulate the fade/blur flash effect used in the following website:

/ (image fades and blurs on hover, while text fades in simultaneously)

using JQuery? I am looking to have this whole chain of effects happen on load or when the DOM is ready (instead of on hover). And by blur, I mean a gaussian-type of blur - possibly using Pixastic (?)

I am really new at this, so please be gentle :)

Thank you.

Can anyone think of a way to simulate the fade/blur flash effect used in the following website:

http://www.frenchlaundry./ (image fades and blurs on hover, while text fades in simultaneously)

using JQuery? I am looking to have this whole chain of effects happen on load or when the DOM is ready (instead of on hover). And by blur, I mean a gaussian-type of blur - possibly using Pixastic (?)

I am really new at this, so please be gentle :)

Thank you.

• javascript
• jquery
• fade
• blur

3 Answers 3

You should use animate() method of Jquery to achieve what you want.

Check out the link below...It has numerous examples:

http://api.jquery./animate/

HTH

Since Jquery effects are just implementations of the animate() method, which uses CSS properties and then makes a smooth transition between them, there's no easy way to implement a Gaussian blur.

You could use Pixastic and then fade in some hidden text over the blurred image, why not.

This library includes the ability to blur images: http://www.pixastic./

As for animating the blur effect, as Raja said you can look at the animate() method of Jquery, or simply use the setTimeout function.