2015-12-02 49 views
0

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

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

+1

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

+1

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

+0

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

回答

1

你可以試一下這樣

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

+0

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

+0

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