I'm currently using the JQuery slideDown/slideUp effect and am not acplishing what I want.
Essentially, I want to create an action where I "push" a div off the top of the browser window.
Something similar to the following push effect example.
How can I do this with JQuery?
The problem with just using slideDown/slideUp is that the other DIV just overlaps the div I'm hiding. But instead, I want to PUSH the div I don't want visible off the top of the browser window.
I'm currently using the JQuery slideDown/slideUp effect and am not acplishing what I want.
Essentially, I want to create an action where I "push" a div off the top of the browser window.
Something similar to the following push effect example.
How can I do this with JQuery?
The problem with just using slideDown/slideUp is that the other DIV just overlaps the div I'm hiding. But instead, I want to PUSH the div I don't want visible off the top of the browser window.
Share Improve this question asked Apr 28, 2010 at 5:36 JGreigJGreig 7,5695 gold badges21 silver badges11 bronze badges3 Answers
Reset to default 8Make two divs, one inside the other. Using CSS, define a height for the outer one and set overflow: hidden
. This means that if the inner div's content is too long, it will be invisible.
____ _____ ____
| | ooo | | <-- this is the outer div
|____|_____|____|
| xxx | ooo -> visible
|_____| xxx -> invisible
^-- this is the inner div
Whatever you want to slide goes inside the inner div. Now all you need to do is move the inner div upwards:
_____
| ooo |
____|_____|____
| | xxx | | now, ooo -> invisible
|____|_____|____| xxx -> visible
This can be done using jQuery's animate
function.
$('#innerDiv').animate({
top: -50px
});
Not sure if I understand you well, but you could just animate it, like
var pos = $('#myDIV').position();
$('#myDIV').css({
position: 'absolute',
left: pos.left,
top: pos.top,
}).animate({
top: '-=400'
},{
duration: 2000,
plete: function(){
$(this).remove();
}
});
that should move your div out of view and remove it afterwards. If it's not what you want you can hopefully adapt it.
i think, this is what u are looking for http://jsfiddle/JuW3B/2/