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

我正在建立我的妹妹网站SarahNWatson.com/new。我把它设置成一个大的照片/视频专辑。对于实际的内容页面，比如她的Bio，我拥有这个页面以便打开一个模式窗口。jQuery动画高度向外展开而不是向下

现在我有模态窗口，以便高度开始在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; 
}

来源

2011-10-06 watzon

*** ...推动两个方向...... ***您指的是哪个方向？垂直还是水平？ –

垂直在高度 – watzon

开始offsetH = winHeight/2和offsetW = winWidth/2。然后，为所有顶部，左侧和高度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 }); 
}

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

从本质上讲，您将箱子向上移动，因为它变得更高。所以不是滑下来，而是从中间展开。

来源

2011-10-06 18:43:58

你能修改它有点简单吗？我不太明白。是否有可能让我看完整的代码？哦，我只想让高度向外扩展。不是宽度。 – watzon

不起作用。从右下角带来盒子... – watzon

现在工作！谢谢！ – watzon

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

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

来源

2011-10-06 18:49:24

几乎可以工作，但随后它消失... – watzon

我的计算结果是：P margin-top需要是合成高度的1/4。这里是我的意思http://jsbin.com/eworig的演示 –

尝试使用CSS设置底部而非顶部。然后你应该使用元素的底部来定位它，从而让它向上而不是向下。

.animate（）总是动态地离开锚点。

来源

2011-10-06 18:57:28

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

回答

相关问题