我想爲我的家庭車庫門開啓器製作一個動畫,我寫到顯示車庫的開啓和關閉。到目前爲止,我已經想出瞭如何在html/css中繪製我想要的(可能不正確)。現在我正在使用slideUp()
,但它看起來不太好。我真正想要發生的是將邊緣滑動到0,然後將div滑動到0.這隻適用於我的一個矩形,但如果將它添加到其他矩形,它們都會同時運行,甚至如果我做動畫延遲..替代slideUp,移動股利,然後隱藏?
這是我的jsfiddle到目前爲止。
$("#hidebutton").click(function() {
$('.panel').animate({'margin-top': '0'}, 1000);
$('.panel').animate({'height': '0'}, 1000);
});
$("#unhidebutton").click(function() {
$('.panel').animate({'margin-top': '15px'}, 1000);
$('.panel').animate({'height': '30px'}, 1000);
});
另外,我沒有線索如何使它所以我的按鈕股利不向上滑動,但是這對我來說並不重要但..
嘗試使用'id's來識別,而不是單獨類'.panel'的每一個矩形。 –
CSS float''middle'和'top'是FLOAT的無效值。 –
我這樣做在這個jsfiddle:https://jsfiddle.net/sb5jL1k4/16/ 我只是討厭使用所有setTimeouts,圖中必須有更好的方式 – cashman04