動態更改動畫元素的屬性

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°旋轉......昨天當我第一次幫助你！ ;）