javascript - 使用 javascript 或 jquery 垂直扩展弹出窗口

Question

我正在尝试找到一种方法，使我的弹出窗口以与 Facebook 生日弹出窗口扩展类似的方式扩展。如果您登录到您的 Facebook 页面并单击显示有多少 friend 今天过生日的位置旁边的“其他”链接，您会注意到弹出窗口显示得非常小，然后以垂直方式变大。

我怎样才能做到这一点？

我创建了一个 fiddle 来展示我目前拥有的东西。

https://jsfiddle.net/05w8fpL5/

我已经添加了..

.fadeIn("slow");

和

.fadeOut("slow");

到目前为止我喜欢，但我希望我能说说淡入和淡出需要多长时间。

有谁知道我怎样才能做到这一点？

Answer 1

您可以使用 .slideUp() 实现此目的和 .slideDown Jquery 中的事件。这将提供您正在寻找的垂直扩展动画。因此，请更改您的 .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 属性，您可以在 .slideDown 之后将 min-height 设置回默认值.您可以尝试使用 .animate() 使其更流畅。确保在向上滑动时将 mine-height 设置为 0px:

$('.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