替代slideUp，移動股利，然後隱藏？

我想爲我的家庭車庫門開啓器製作一個動畫，我寫到顯示車庫的開啓和關閉。到目前爲止，我已經想出瞭如何在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); 
});

另外，我沒有線索如何使它所以我的按鈕股利不向上滑動，但是這對我來說並不重要但..

來源

2015-12-02 cashman04

嘗試使用'id's來識別，而不是單獨類'.panel'的每一個矩形。 –

CSS float''middle'和'top'是FLOAT的無效值。 –

我這樣做在這個jsfiddle：https://jsfiddle.net/sb5jL1k4/16/ 我只是討厭使用所有setTimeouts，圖中必須有更好的方式 – cashman04

你可以試一下這樣

var duration = 2000; // change as you like 
$("#hidebutton").click(function() { 
    var i = 0; 
    var timer = setInterval(function(){ 
    if(i === $('.panel').length) clearInterval(timer); 
    $('.panel:eq('+i+')').animate({'margin-top': '0'}, 1000).animate({'height': '0'}, 1000); 
    i++; 
    alert(i); 
    } , duration); 
}); 

$("#unhidebutton").click(function() { 
    var i = $('.panel').length; 
    var timer = setInterval(function(){ 
    if(i === 0) clearInterval(timer); 
    $('.panel:eq('+i+')').animate({'height': '30px'}, 1000).animate({'margin-top': '15px'}, 1000); 
    i--; 

    } , duration); 
});

Working Demo

來源

2015-12-02 23:33:52

看起來可以做我想做的事。我有一個版本的工作完全如何我想在這裏：https://jsfiddle.net/sb5jL1k4/20/ 我會玩弄你的，看看我能否得到適合我的時機 – cashman04

@ cashman04你的代碼是太長..我用clearInterval更新我的代碼來停止setInterval的連續工作 –

替代slideUp，移動股利，然後隱藏？

回答

相關問題