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動畫高度向外展開而不是向下

回答

相關問題