I'm looking for a jQuery 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!

I'm looking for a jQuery 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!

• javascript
• jquery
• effects

• Do you have an example of this? Any images? – Ivan Nevostruev Commented Dec 17, 2009 at 15:31
• You need to be a bit more specific about the effect. And don't expect someone just to write it for you, try yo build it yourself first and ask if you get stuck. – Tatu Ulmanen Commented Dec 17, 2009 at 15:31

3 Answers 3

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.

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

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/

some examples of processing.js

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

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