JQuery: How to perform a "push" slide, not a slide up?

Question

I using the following JQuery:

$("#pushSlideDiv").slideDown("fast");

However, this creates a "slide" effect. Meaning, if I do a slidedown, this makes the underlining DIV reveal it's self from a top-to-bottom reveal.

I want a "push" effect, where the slidedown instead reveals as though the div is being pushed onto the page ... where you first see the bottom of the div.

How can I do this with JQuery?

UPDATE:

This isn't a great example, but it does show a push effect that I'm trying to accomplish vs a "slide" effect.

Answer 1

You want jquery ui! Check it out: http://jqueryui.com/demos/effect/#default

Here's a closer look: http://docs.jquery.com/UI/Effects/Slide

Answer 2

You might want to try the slide effect for .show and .hide in jQuery UI.

Jquery UI Show Demo

Answer 3

You can use jQuery's animate() method.

$("div").css({top:0}).animate({top:500},{duration: 50});

This will set your div initially at top:0 and animate it to top:500 over a duration of 0.5 seconds.

Answer 4

It sounds like you want a combination of the Slide effect and the Clip effect.

Not sure what that effect would be to use.