efeitos slide dentro da div não funciona

Boa Noite a todos,

tenho uma div e estou tentando esticá-la ao passar o mouse e logo em seguida ao clicar numa <li> dentro dessa div, fazer a mesma apresentar os dados com efeito slideDown "jquery".

Porém, não consigo fazer os dois efeitos...

Detalhe, se eu colocar a <ul> fora da div, o efeito slide, funciona normalmente.

 

 $(
 function() {
 $("#projetos").mouseover(
 function() {
 $(this).animate({
 "height": 380
 },"slow");
 }
 );
 });

html >______________________________________________________________

<li id="jardinagem">

<p style="cursor:pointer;" **onClick="$('#jar').slideDown(2000);"**>

<!-- aqui, as informações aparecem mas sem o efeito slide -->

Jardinagem

</p>

<br>

 <ul id="jar" style="display:none;">
 <li>Adubação de jardins</li>
 <li>Controle de pragas e doenças</li>
 <li>Podas profiláticas<br> (eliminação de galhos mortos e correção)</li>
 <li>Formação e preservação de canteiros</li>
 <li>Manutenção de cerca viva</li>

 </ul>
</li>

 

...