动态更改动画元素的属性

Question

我必须承认我比CSS中的天才还少...为了练习，我创建了一个模拟啤酒杯的动画。

目前和我的技能，我有一个很好的液体动画和一个伟大的自定义颜色选择器:)。

现在我想模拟醉酒的液体。 单击液体（彩色）部分看到动画

通过改变liquid容器，我已经实现了模拟液体怎么会消失， http://jsfiddle.net/jm5c4qby/6/但在顶部，颜色不是所期望的。随着我移动wave元素。

，当我尝试增加wave元素的height我没有成功： 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); 
}); 

这将增加每次点击你的波浪边距。另外，让bottom属性始终为零！它似乎很奇怪，底部设置为零，但我发现你的#liquid是180°旋转......昨天当我第一次帮助你！ ;）