Seeking a simultaneous fade and blur effect using JQuery or Javascript

Question

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

http://www.frenchlaundry.com/ (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.

Answer 1

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

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

http://api.jquery.com/animate/

HTH

Answer 2

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.

Answer 3

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

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

Answer 4

Thank you all so much. I do see how the bits can come together to create a chained event that may be a good alternative to the flash script... I obviously just need a bit more study on the library and its processes.

I really appreciate you all taking the time to help me out. You've given me a great place to start.