Seeking a simultaneous fade and blur effect using JQuery or Javascript - Stack Overflow

admin管理员组

文章数量:1310081

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

Share Improve this question Follow asked Apr 11, 2010 at 23:33 Heath WallerHeath Waller 3111 silver badge33 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

本文标签： Seeking a simultaneous fade and blur effect using JQuery or JavascriptStack Overflow