JQuery: Push Effect?

Question

В настоящее время я использую эффект слайда JQuery slideDown/slideUp и не выполняю то, что хочу.

По существу, я хочу создать действие, в котором я «нажимаю» div в верхней части окна браузера.

Что-то похожее на following push effect example.

Как я могу сделать это с помощью JQuery?

Проблема при использовании slideDown/slideUp заключается в том, что другой DIV просто перекрывает div, который я скрываю. Но вместо этого, я хочу, чтобы PUSH div, я не хочу видеть верхнюю часть окна браузера.

Answer 1

Сделайте два divs, один внутри другого. Используя 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 

Это может быть сделано с помощью animate функции JQuery в.

$('#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/