动态更改动画元素的属性

Question

我必须承认我在CSS中不如天才......为了练习，我创造了一个模拟啤酒杯的动画。

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

现在我想模拟喝醉的液体。 点击液体（彩色）部分以查看动画

通过更改liquid容器，我已经实现了模拟液体如何消失， http://jsfiddle.net/jm5c4qby/6/但在顶部，颜色不是理想的。当我移动wave元素时。

当我尝试增加height元素的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);
});

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