The answer to your question is to do the following.
Remove the CSS opacity:0;
in the stylesheet and use this code adjusted from yours
I increased from 300
to 3000
which in seconds is from .3seconds
to 3seconds
.
chained:
window.addEvent('load', function () {
$$('body').fade('hide').set('morph', {
duration: 3000
}).morph({
'opacity': '1'
});
});
expanded:
window.addEvent('load', function () {
var el = $$('body');
el.fade('hide'); // hide body tag
el.set('morph', {duration: 3000});
$$('body').morph({'opacity': '1'});
});
Notice:
I do agree with LifeInTheGrey about bad practice, but i said i would answer your question.