javascript - 动态改变动画元素的属性

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

更新您的点击功能:

var padding = 0;

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

这将在每次点击时增加您的 waves margin-bottom。另外，让 bottom 属性始终为零! bottom 设置为零似乎很奇怪，但我发现你的 #liquid 是 180 °旋转……昨天第一次帮你的时候! ;)