使用JQuery或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.