javascript - 打开叠加层时如何进行过渡？

Question

我正在研究，当我点击一个元素时，会打开一个叠加层，其中包含内容，但我想为其添加过渡效果。

这是我的 JavaScript 代码:

(function($)
{
    $('.overlay-trigger').click(function(e)
    {
        e.preventDefault();
        $('#expose-mask').css({'display': 'inherit'}).fadeIn(function()
        {
            $('.overlay-box').css({'display': 'inherit'});
        });
    });
    $('#expose-mask, .overlay-box').css({'display': 'none'});
    $('.overlay-box-closer, #expose-mask').click(function()
    {
        $('.overlay-box, #expose-mask').css({'display': 'none'});
        $('#expose-mask');
    });
})(jQuery);

.overlay-trigger 类表示当我点击一个元素时覆盖的激活器，#expose-mask 表示打开覆盖时的背景和 .overlay-box类表示打开时#expose-maskid里面的内容。

我想要这样的东西，在这个网站上:http://tympanus.net/Development/ModalWindowEffects/

我想要“滑入(底部)”效果。

我没有使用与本网站相同的代码，所以我不知道如何使用。这是我的 HTML 代码:

<a id="help" class="overlay-trigger" href="help.php">Help</a>
<div class="overlay-box">
<div class="overlay-box-container">
    <span class="overlay-box-closer" title="Close the overlay"></span>
    <h1 class="big-title">Help</h1>
    <p>Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.</p>
</div>

我的 CSS 代码:

.overlay-box
{
    background-color: #FFFFFF;
    position: fixed;
    top: 35%;
    right: 0;
    left: 0;
    z-index: 4;
    width: 70%;
    margin: 0 auto;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
}

.overlay-box-container
{
    margin: 20px;
}

.overlay-box-closer:before
{
    content: "\f00d";
    position: absolute;
    top: -21px;
    right: -15px;
    cursor: pointer;
    font-size: 40px;
}

#expose-mask
{
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
}

此处实时预览:http://nextgenfocus.com/test1/单击页脚中的“帮助”文本以打开叠加层。

谢谢。

Answer 1

试试这个:

(function($)
{
    $('.overlay-trigger').click(function(e)
    {
        e.preventDefault();
        $('#expose-mask').show();
        $('.overlay-box').slideDown("slow");        
    });
    $('#expose-mask, .overlay-box').hide();

    $('.overlay-box-closer, #expose-mask').click(function()
    {
        $('.overlay-box, #expose-mask').hide();
    });
})(jQuery);