jQuery: Animieren conundrum

Question

Ich habe jQuery Animation Fragen ...

Ich habe eine Fußzeile mit einer versteckten div oben drauf. Wenn jemand auf einen Knopf in der Nähe der Kopfzeile klickt, sollte die div animiert UP. Art wie Schiebetüren oben, wie Sie einen Aktenordner aus einer Schublade sind zu ziehen. (Nicht die normale Folie nach oben, wo der Boden des div nach oben gleitet nach oben.)

Ich fand dieses Stück Code, Art ist das, was ich will, aber es bewegt sich die Basislinie (Fußzeile).

.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");
})

Wenn über die rote div Box mousing, werden Sie sehen, dass die div darunter nach unten drückt. Wie bekomme ich es nur animieren oder aufwachsen? (He-er. Tut mir leid. Ich dachte, der Mutter schrie mich an).

Answer 1

Hier ist eine Seite arbeiten, um die Art, wie ich glaube, Sie wollen. Ich denke, das Hauptproblem war das das expandierende div in einem div sein muss, der eine Höhe hat. Hier ist eine Seite mit der div, die andere Inhalte expaning wenn es sich ausdehnt.

Sie den Code Schauen Sie sich die Wordpress-Plugin Sexybookmarks für ein gutes Beispiel für diese Art von Trick.

Answer 2

Ich vermute, Sie fix ist eine dieser zwei Dinge:

1. Position ändern: relativ zu position: absolute
2. Sie wollen nicht, um tatsächlich .featureBox bewegen, sondern ein anderes Element innerhalb von .featureBox (wahrscheinlich ein DIV)