Question

我正在SarahNWatson.com/new为我姐姐建立一个网站。我将它设置为一张大型照片/视频专辑。对于实际内容页面，例如她的Bio，我有它，以便它打开一个模态窗口。

现在我有模态窗口，以便高度从0px开始然后动画打开，但是这给了我一个向下滑动的效果。我希望它向外打开，就好像盒子里的东西向两个方向推进一样。我怎么能做到这一点？

以下是代码：

function createModal(filler) {
                    var $this = $(this);
                    var $body = $('body');
                    var winHeight = $(window).height();
                    var winWidth = $(window).width();

                    $body.prepend('<div id="blackout">');
                    $("#blackout").css({ height:winHeight }).fadeIn(1800);
                    $body.prepend('<div id="modal_window">');
                    $("#modal_window").html(filler).fadeIn(2000);

                    var modalHeight = $("#modal_window").height();
                    var modalWidth = $("#modal_window").width();

                    var offsetH = winHeight/2 - modalHeight;
                    var offsetW = winWidth/2 - modalWidth/2;
                    $("#modal_window").css({ top:offsetH, left:offsetW, height:'0px' }).animate({ height:modalHeight });
                }

CSS：

#modal_window {
    position: absolute;
    z-index: 1000;
    width: 600px;
    background: rgba(0,0,0,.8);
    padding: 15px;
}

Answer 1

从offsetH = winHeight/2和offsetW = winWidth/2开始。然后，为所有top，left和height CSS属性设置动画。最终的顶部将是(winHeight - modalHeight)/2，最后的结果将是(winWidth - modalWidth)/2。

function createModal(filler) {
    var $this = $(this);
    var $body = $('body');
    var winHeight = $(window).height();
    var winWidth = $(window).width();

    $body.prepend('<div id="blackout">');
    $("#blackout").css({ height:winHeight }).fadeIn(1800);
    $body.prepend('<div id="modal_window">');
    $("#modal_window").html(filler).fadeIn(2000);

    var modalHeight = $("#modal_window").height();
    var modalWidth = $("#modal_window").width();

    var offsetH1 = winHeight/2;
    var offsetH2 = (winHeight-modalHeight)/2;
    var offsetW = (winWidth-modalWidth)/2;

    $("#modal_window")
        .css({ top:offsetH1, left:offsetW, height:'0px' })
        .animate({ top:offsetH2, height:modalHeight });
}

更新：代码示例已更新为仅垂直动画。

基本上，随着它变得越来越高，你正在移动盒子。因此，不是向下滑动，而是从中间扩展。

Answer 2

你可以给它一个最终高度的一半（modalHeight），并为动画添加marginTop:"toggle"：

.animate({ height:modalHeight, marginTop:"toggle"})

Answer 3

尝试使用CSS设置Bottom而不是Top。然后，您应该使用元素的底部来定位它，从而使其向上而不是向下。

.animate（）总是远离锚点动画。

jQuery动画高度向外扩展而不是向下扩展

3 个答案: