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

jQuery animate height expand outward instead of down

本文关键字：扩展 动画 高度 jQuery      更新时间：2023-09-26

我在SarahNWatson.com/new为我妹妹建一个网站。我把它设置成一个大的照片/视频相册。对于实际的内容页面，比如她的简历，我设置了它，这样它就会打开一个模态窗口。

现在我有一个模态窗口，所以高度从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;
}

从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 });
}

UPDATE:代码示例更新为仅垂直动画。

本质上，你在移动盒子，因为它变高了。所以它不是向下滑动，而是从中间展开。

你可以给它的margin-top设置为最终高度(modalHeight)的一半，并为你的动画添加marginTop:"toggle":

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

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

.animate()总是使动画远离锚

相关文章：