Javascript : Effet sur display="block"/"none"

Bonjour !

J'ai créé un site web, avec un onglet de connexion, "ouvrable" via un lien en javascript.

Le code javascript est le suivant :

<script language="javascript" type="text/javascript">function bascule(elem)
{
etat=document.getElementById(elem).style.display;
if(etat=="none"){
document.getElementById(elem).style.display="block";
}
else{
document.getElementById(elem).style.display="none";
}
}
</script>

Il est en fin de page. Dans la page j'ai disposé :
<code><a
 href="" onclick="bascule('1'); return false;"
 class="connect">Connexion</a>

qui est le lien pour ouvrir cette div :

<div id="1" style="display: none;">Connectez vous
à l'espace d'administration avec votre login et votre mot de
passe :<br>
<br>
FORMULAIRE<br>
<br>
<a href="" onclick="bascule('1'); return false;"
 class="close">Fermer</a><!--pour fermer la div-->
</div>

Le code marche très bien.

Maintenant vient ma question : Comment mettre un "effet" d'ouverture et de fermeture de la div, car la div s'ouvre et se ferme, et c'est normal, d'un coup, et je voudrais qu'elle s'ouvre, par exemple avec un petit effet, genre "slide"...

Je ne sais pas si j'ai été clair, demandez moi des précisions, au besoin...

Merci de vos réponses ;)