Aide pour faire apparaitre progressivement une image avec Mootools

Bonjour,

Je suis un nouvel utilisateur de Mootools.
J'utilise mootools 1.2.0

Je cherche à faire appraitre progressivement une image dans une DIV et je n'y arrive pas.
En parcourant le web je pense que la solution se trouve autours de la commande "fade" mais je n'y arrive pas.
Si une ame charitable pouvait se pencher sur mon problème et me trouver la solution, ce serait sympa.

Ma page PHP me permettant d'afficher l'image sans effet :

<script type="text/javascript">
function affiche(numphoto)
    {
        document.getElementById("detphoto").innerHTML = "<img src=\"Img/1/" + numphoto + ".jpg\" height=\"330px\" />";
    };
</script>

<div id="detphoto"></div>
   <div id="wrap">
      <ul id="carousel">
         <li><img src='Img/1/thumb/2.jpg' alt='photo2' onclick="affiche(2)" /></li>
         <li><img src='Img/1/thumb/3.jpg' alt='photo3' onclick="affiche(3)" /></li>
         <li><img src='Img/1/thumb/7.jpg' alt='photo7' onclick="affiche(7)" /></li>
      </ul>
   </div>
</div>