Animacja div od dołu do góry, zamiast góry do dołu w jQuery

Question

mam div który animuje do jego height podczas wywoływania funkcji kliknij:

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

działa dobrze do tej pory. Ale chcę animować div od dołu do góry i inaczej niż w tym fiddle.

Jakieś rozwiązanie?

Answer 1

Można umieścić go w pojemniku i umieścić go absolutnie ?:

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

Edycja: Dlaczego to działa
Mam umieszczony pojemnik po menu i biorąc pod uwagę jej styl position:relative. Co Zakładam się menu (#test) nadano styl position:absolute co oznacza, że ​​można ją ustawić według top, right, bottom i left, w stosunku do elementu zawierającego (Pod warunkiem, że ma position inny niż domyślny stąd dajemy kontener pozycja relative). Jeśli damy elementowi top:0;left:0, górna lewa część elementu będzie przyklejać się do górnej lewej części jego rodzica, podobnie, gdybyśmy zrobili top:0;bottom:0, lewy dolny element tego elementu byłby przyklejony do lewego dolnego rogu tego elementu. Rambling, czyż nie? Podsumowując, #test jest "zablokowany" na spodzie jego rodzica, dlatego animuje się od dołu. Kolejny szybki punkt, wysokość kontenerów jest ważna! Ponieważ ustawiliśmy bezwzględne położenie, nie pchniemy kontenera do jego wysokości, więc ustawiamy wysokość, aby zapewnić, że #test ładuje 500px z wierzchu kontenera.