How do i create a nice looking image fadein onload with mootools?

I´m creating a website for a photographer who would like a fine fadein on his images. I have excluded flash as a solution and would like to use those fine-looking effects of mootools fx. But the problem is that I'm really lousy when it comes to javascript. So if anyone could give me an开发者_StackOverflow中文版 easy solution for fading in one single image onload and when the image is loaded I would be really happy. I know there is a lot of different people out there who have this. But the problem is that i don't know how the code works even if it is a complete solution. So most important. If anyone has got the time to explain what every single line of code does i would be more than grateful. Thanks!

---

A simple fade-in is surely the simplest thing one can imagined:

// 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');
    }
});​

Working example: http://jsfiddle.net/oskar/RNeS5/ (HTML, CSS, MooTools)