Comment créer une image fadein onload sympa avec mootools?

Question

Je suis en train de créer un site web pour un photographe qui aimerait bien voir ses images. J'ai exclu flash comme une solution et voudrais utiliser ces effets de mootools fx. Mais le problème est que je suis vraiment moche quand il s'agit de javascript. Donc, si quelqu'un pouvait me donner une solution facile pour l'évanouissement dans une seule image en charge et quand l'image est chargée, je serais vraiment heureux. Je sais qu'il y a beaucoup de gens différents qui ont cela. Mais le problème est que je ne sais pas comment le code fonctionne même si c'est une solution complète. Donc le plus important. Si quelqu'un a le temps d'expliquer ce que chaque ligne de code fait, je serais plus que reconnaissant. Merci!

Answer 1

Un fade-in simple est sûrement la chose la plus simple, on peut imaginer:

// set-up an event on the browsers window 
window.addEvents({ 

    // be sure to fire the event once the document is fully loaded 
    load: function(){ 

     // assing 'singleImage' variable to the image tag with the 'image' ID 
     var singleImage = $('image'); 

     // set a bunch of CSS styles to the aforementioned image 
     singleImage.set('styles', { 
      'opacity': 0, 
      'visibility': 'visible' 
     }); 

     // fade in the image 
     singleImage.fade('in'); 
    } 
});​ 

Exemple de travail: http://jsfiddle.net/oskar/RNeS5/ (HTML, CSS, MooTools)