I am having jQuery animation issues...

I have a footer with a hidden div on top of it. When someone clicks a button near the header, the div should animate UP. Sort of like sliding up, like you're pulling a manila folder out of a drawer. (Not the normal slide up where the bottom of the div slides up to the top.)

I found this piece of code that is kind of what I want, however, it's moving the baseline (footer).

    border:1px solid red;

$('.featureBox').hover(function()  {
    $(this).animate({top:'-320px', height:'540px'},"slow");
function() {
    $(this).animate({top:'0px', height:'150px'},"slow");

When mousing over the red div box, you'll see that the div below it pushes down. How do I get it to just animate up or grow up? (He-he. Sorry. Just thought of mom yelling at me).

Was it helpful?


Here is a page working the way I think you want. I think the main problem was the the expanding div needs to be inside a div that has a height. Here is a page with the expaning div covering other content when it expands.

Check out the code for the Wordpress Sexybookmarks plugin for a good example of this kind of trick.


I'm guessing your fix is one of these two things:

  1. Change position:relative to position:absolute
  2. You don't want to actually move .featureBox but rather another element inside of .featureBox (probably a DIV)
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow