Как создать красивое изображение fadein onload с mootools?

Question

Я создаю веб-сайт для фотографа, который хотел бы прекрасного fadein на его изображениях. Я исключил 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)