jQuery fade out portion of image according to percentage?

What would the best way to make a "progress bar" with an image instead of a bar be?

I would like to have a percentage variable control how much of an image is opaque. In othe开发者_StackOverflowr words, if the % = 33%, the bottom 33% of the image will be normal, but the top 66% will be faded slightly.

Thanks for the help!

R

Here's an easy way to do it:

http://jsfiddle.net/DQ4Fh/13/

Basically just stack two divs with the same background image (one positioned top and one positioned bottom), make one less opaque, and change the height of the two images to control how much of each is exposed.

in production you should use jquery's animate method in the setProgress function so it updates smoothly. The CSS I used to set the opacity isn't cross browser, you should update it or use jquery to set the opacity of the dimmed div.

You can dynamically change the opacity of an image by changing it's CSS with Javascript. It'd look something like this:

var opacityvalue;//the opacity [a range from 0 (for invisible) to 1 (for visible)]
$('#image').style.opacity=opacityvalue;
$('#image').filters.alpha.opacity=opacityvalue*100;

I'll be honest, I haven't tested it, so there maybe some bugs, but the concept is there.

CSS Reference: http://www.w3schools.com/css/css_image_transparency.asp

Change CSS w/ jQuery: http://www.jquery4u.com/dynamic-css-2/change-css-jquery/

I'd do this with two images (it can be the same image loaded twice) One on top of the other.

http://jsfiddle.net/MPFyt/

This isn't exactly right but you can use it as a starting point.

Best way would be to to use two images. Both on the same position exactly, a background and foreground, and make the foreground clip according to percentage.