jQuery:animate conundrum

Question

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).

.featureBox{width:182px;
    height:150px;
    position:relative;
    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).

Answer 1

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)

Answer 2

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.