JQuery：推效果？

Question

我目前使用JQuery的slideDown/slideUp效果，並沒有完成我想要的。

從本質上講，我想創建一個動作，我的「推」一個div關閉瀏覽器窗口的頂部。類似

東西following push effect example.

我怎樣才能做到這一點使用jQuery？

只用了slideDown /效果基本show的問題是，其他的DIV只是重疊，我隱藏的div。但是相反，我想要推出我不想在瀏覽器窗口頂部顯示的div。

Answer 1

製作兩個div，一個在另一個裏面。使用CSS，定義外部高度並設置overflow: hidden。這意味着，如果內部div的內容太長，它將不可見。

____ _____ ____ 
| | ooo | | <-- this is the outer div 
|____|_____|____| 
    | xxx |  ooo -> visible 
    |_____|  xxx -> invisible 

     ^-- this is the inner div 

無論你想滑動去內部div。現在，所有你需要做的是向上移動內部的div：

 _____ 
    | ooo | 
____|_____|____ 
| | xxx | |  now, ooo -> invisible 
|____|_____|____|   xxx -> visible 

這可以使用jQuery的animate函數來完成。

$('#innerDiv').animate({ 
    top: -50px 
}); 

Answer 2

不知道如果我理解你很好，但你可以只製作動畫，就像

var pos = $('#myDIV').position(); 
$('#myDIV').css({ 
    position: 'absolute', 
    left:  pos.left, 
    top:  pos.top,  
}).animate({ 
    top:  '-=400' 
},{ 
    duration: 2000, 
    complete: function(){ 
     $(this).remove(); 
    } 
}); 

認爲應該將你的DIV出來查看，之後將其刪除。如果它不是你想要的 你可以希望適應它。

Answer 3

我想，這是什麼ü正在尋找 http://jsfiddle.net/JuW3B/2/