CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jordi Castilla
Jordi Castilla

Reputation: 26961

Change attributes of animated elements dynamically

I must admit I'm less than a genius in CSS... To practice, I'm creating an animation that simulates a beer glass.

For the moment and with my skills, I have a nice liquid animation and a great customized color picker :).

Now I want to simulate liquid being drunk. Click the liquid (colored) part to see the animation

By changing liquid container, I've achieved simulate how the liquid goes away, http://jsfiddle.net/jm5c4qby/6/ But in the top part, the color is not the desired. As I'm moving the wave elements.

issue with beer glass

And I don't succeed when I try to increase the height of the wave elements: http://jsfiddle.net/jm5c4qby/8/

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

I've tried with:

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

or

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

But I can't achieve the desired result...

Any ideas?

Upvotes: 4

Views: 127

Answers (1)

Sebastien
Sebastien

Reputation: 1102

Update your click function :

var padding = 0;

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

This will increase your waves margin-bottom on each click. Also, let bottom attribute always to zero ! It's seems weird that bottom is set to zero, but I found out that your #liquid is 180° rotated...yesterday when I first helped you! ;)

Upvotes: 3

Related Questions