如何使用Mootools创建外观美观的淡入淡出效果？

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）