使用javascript或jquery垂直展開彈出式窗口

Question

我想找到一種方法讓我的彈出窗口以與Facebook Birthday彈出窗口類似的方式展開。如果您登錄Facebook頁面並點擊旁邊的「others」鏈接，它會顯示您今天有多少朋友有生日，您會注意到彈出窗口顯示非常小，然後以垂直方式增長。

我該如何做到這一點？

我創建了一個小提琴，以顯示我到目前爲止。

https://jsfiddle.net/05w8fpL5/

我已經加入..

.fadeIn("slow"); 

和

.fadeOut("slow"); 

到目前爲止，這是我喜歡的，但我希望我有一些關於它花了多長時間來淡入這麼說和Out。

有誰知道我該如何做到這一點？

Answer 1

您可以使用Jquery中的.slideUp()和.slideDown事件來實現此目的。這將提供您正在尋找的垂直擴展動畫。因此，改變你的.fadeIn和fadeOut功能，一個重要的注意的是，滑動功能不會min-height工作，你需要從.admin_help_popup刪除CSS這個工作：

$('.admin_popup').on('click',function(){ 
    $(".light_admin,.white_overlay").slideDown("slow"); 
}); 

$('.close_admin_popup').on('click',function(){ 
    $(".light_admin,.white_overlay").slideUp("slow"); 
}); 

如果它是完全必要的，你有即min-height屬性，您可以將min-height設置回.slideDown後的默認值。您可以嘗試使用.animate()使其更平滑。務必將mine-height到0px上上滑：「有一些上了多長時間來淡入和Out這麼說」

$('.admin_popup').on('click',function(){ 
    $(".light_admin,.white_overlay").slideDown("slow", function(){ 
     $(".admin_help_popup").animate({"min-height": "380px"}, "fast"); 
    }); 
}); 

$('.close_admin_popup').on('click',function(){ 
    $(".admin_help_popup").css("min-height", "0px"); 
    $(".light_admin,.white_overlay").slideUp("slow"); 
}); 

Basic SlideUp/Down Fiddle Example without min-height

Fiddle example with min-height