mootools - 如何使用 mootools 创建一个漂亮的图像淡入淡出 onload？

Question

我正在为一位希望在他的图像上进行精细淡入淡出的摄影师创建一个网站。我已将 flash 作为解决方案排除在外，并希望使用 mootools fx 的那些精美效果。但问题是我在 javascript 方面真的很糟糕。因此，如果有人能给我一个简单的解决方案，让我在加载单个图像时淡入淡出，并且在加载图像时，我会非常高兴。我知道有很多不同的人有这个。但问题是我不知道代码是如何工作的，即使它是一个完整的解决方案。所以最重要。如果有人有时间解释每一行代码的作用，我将不胜感激。谢谢！

Answer 1

一个简单的淡入肯定是人们能想象到的最简单的事情：

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

工作示例： http: //jsfiddle.net/oskar/RNeS5/（HTML、CSS、MooTools）