Change attributes of animated elements dynamically

Question

I have to admit that I am less than a genius in CSS ... To practice, I create an animation that mimics a beer glass.

At the moment, and with my skills, I have a nice liquid animation and an excellent individual choice of color :) .

Now I want to simulate a liquid getting drunk. Click the liquid (color) part to see the animation

By changing the container liquid, I achieved a simulation of how the liquid goes off, http://jsfiddle.net/jm5c4qby/6/ But at the top, color is not desirable. When I move the elements wave.

And I fail when I try to increase the heightelements wave: http://jsfiddle.net/jm5c4qby/8/

$("#liquid").click(function(){
    bottom += 30;
    h += 30;
    $(".wave").animate({'bottom': bottom + "px", 'height': h + "%"}, 100);
});

:

$(".wave").animate({'height': h + "%"}, 100);

$(".wave").animate({'bottom': bottom + "px"}, 100);

...

?

Answer 1

click:

var padding = 0;

$("#liquid").click(function(){
    padding += 30;
    $(".wave").animate({'padding-bottom': padding + "px"}, 100);
});

. , let bottom ! , , , #liquid 180 °... , !;)