jquery fill glass effect

Question

I'm looking for a jqeury or javascript that fill up a glass of water. So when clicking on one button you add water to the glass and when clicking on another you remove water from the glass. Just wonder if someone already have written something like this that I can use. Thanks!

Answer 1

Create a picture of a water glass with the glass portion transparent.

Put a picture of water behind it.

Animate the image from the bottom to the top. If you want "wavy" water as it fills, make the image have a rippled top, make it slightly larger than the glass, and animate from side to side a little as well.

Answer 2

You may want to look into the slide down and slideup effects in jQuery. You should be able to get what you want out of them.

Link

Answer 3

To create realistic water effects, use the canvas element in A class browsers.

Better, explore john 'jquery' resig's processing.js library. I guess it shouldnt be tough to do what you want with this.

To start you off, http://processingjs.org/

some examples of processing.js

http://hyper-metrix.com/processing-js/docs/?page=A%20mouse-driven%20graphic%20equalizer

http://www.mattryall.net/blog/2008/11/wiki-visualisations-with-javascript#