how can I partially fade out an image out with jQuery

Question

I have a background image. I want to fade it out part-way when the page loads, meaning I want the effect of the fadeOut -- but instead of making the image invisible I want it to stop part-way so that it is semi-visible.

Is there a way of doing this with fadeout? Is there another method I could use?

take a look at http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements — Andrew Johnson, Sep 03 '13 at 20:14
[`fadeTo()`](http://api.jquery.com/fadeTo/) as well. Oh, and looky here--a whole section on [fading](http://api.jquery.com/category/effects/fading/). — Brad Christie, Sep 03 '13 at 20:14
Do you want only part of the image to fade, or the entire image to be somewhere between opaque and transparent? — j08691, Sep 03 '13 at 20:25
@j08691 the entire image to be somewhere between opaque and transparent — bernie2436, Sep 03 '13 at 20:27

letiagoalves · Accepted Answer · 2013-09-03T20:25:43.717

4

Did you tried .animate(properties, duration) function?

$("#image").animate({ opacity: 0.5}, 200);

or you could also use .fadeTo(duration, opacity) function:

$("#image").fadeTo(2000, 0.5);

DEMO

edited Sep 03 '13 at 20:25

answered Sep 03 '13 at 20:13

letiagoalves

11,224
4
40
66

how can I partially fade out an image out with jQuery

1 Answers1