Animate div von unten in jQuery anstelle von oben nach unten nach oben

Question

Ich habe ein div die zu seiner height beseelt, wenn ein Klick-Funktion auslösenden:

$('#menu').click(function() { 
    $('#test').animate({ 
     height: 'toggle' 
    }, 290, function() {  
    }); 
}); 

funktioniert soweit gut. Aber ich möchte die div von unten nach oben animieren und anders als in dieser fiddle gesehen.

Irgendeine Lösung?

Answer 1

Man könnte es in einen Behälter und Lage versetzt es absolut ?:

HTML:

<a href="#" id="menu">click me for menu</a> 
    <div id="cont"> 
    <div id="test"></div> 
</div> 

CSS:

#cont{ 
    height:500px; width:50px; position:relative; 
} 
#test{ 
    height: 500px; width: 50px; background-color: #000; display: none; position:absolute; bottom:0; left:0; 
} 

JavaScript:

$('#menu').click(function() { 
    $('#test').animate({ 
     height: 'toggle' 
     }, 290, function() { 
    }); 
}); 

Fiddle

Edit: Warum funktioniert es
ich einen Container um das Menü platziert haben und es den Stil position:relative gegeben. Was nehme ich an ein Menü sein (#test) hat den Stil position:absolute gegeben worden bedeutet, dass Sie es nach top positionieren können, right, bottom und left, bezogen auf das Aufnahmeelement (Gestellt es eine position anders als der Standard hat damit wir die geben Behälter a relative Position). Wenn wir dem Element eine top:0;left:0 geben, würde die obere linke Seite des Elements oben links von der Elternseite bleiben, in ähnlicher Weise würde, wenn wir top:0;bottom:0 taten, die untere linke Seite dieses Elements unten links von der Elternseite bleiben. Wandern, nicht wahr? Also, um es zusammenzufassen, #test ist 'stecken' auf der Unterseite der Eltern, daher animiert es von unten. Ein weiterer schneller Punkt, die Containerhöhe ist wichtig! Da wir #test eine absolute Position angegeben haben, wird der Container nicht auf seine Höhe verschoben. Daher stellen wir die Höhe so ein, dass #test 500px von der Oberseite des Containers geladen wird.