JQuery: Push Effect?

Question

I'm currently using the JQuery slideDown/slideUp effect and am not accomplishing 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.

Answer 1

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,
   complete:   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.

Kind Regards

--Andy

Answer 2

Make 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
});