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

时间:2015-08-29 03:20:26

标签: javascript jquery css animation

我正在尝试找到一种方法,使我的弹出窗口以与Facebook Birthday弹出窗口扩展类似的方式展开。如果您登录到您的Facebook页面并单击"其他人"链接旁边显示你的朋友今天有多少生日,你会注意到弹出窗口显示非常小,然后以垂直方式增长。

我怎么能这样做?

我创造了一个小提琴来展示我到目前为止所拥有的东西。

https://jsfiddle.net/05w8fpL5/

我已添加..

.fadeIn("slow");

.fadeOut("slow");

到目前为止,我喜欢这个,但我希望我有一些说法可以告诉我们有多长时间才能淡入淡出。

有谁知道我怎么能做到这一点?

1 个答案:

答案 0 :(得分:1)

您可以使用Jquery中的.slideUp().slideDown事件来实现此目的。这将提供您正在寻找的垂直扩展动画。因此,更改您的.fadeInfadeOut函数,<幻灯片函数不能与min-height 一起使用的重要说明,您需要从{{{{}}中删除该CSS 1}}为此起作用:

.admin_help_popup

如果完全有必要拥有$('.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

Basic SlideUp/Down Fiddle Example without min-height

Fiddle example with min-height