Question

我希望在所有元素完成加载后淡入整个网页。网页包括从左到右重复的背景图像，以及包含一些文本和图片的主要内容区域。我假设我应该在CSS中将body opacity设置为0，并使用JavaScript代码淡入页面。

我必须使用MooTools，更具体地说，使用版本1.2.6，因为该库已经链接到页面（并且由于多种原因不应该升级到更新的版本）。

其中一位StackOverflow专家建议将此MooTools片段作为解决方案：

window.addEvent('load', function() {
  $$('body').set('morph', {duration: 300}).morph({'opacity': '1'});
});

问题由于某种原因，该代码片段不会在页面中平滑淡出，而是立即显示背景，然后，大约一秒钟左右，页面弹出，没有任何淡入淡出-有效。很可能是我做得不对的是我。

我很欣赏知识渊博的人的一些建议。

Answer 1

您的问题的答案是执行以下操作。

删除样式表中的CSS opacity:0;并使用从您自己调整的代码

我从300增加到3000，在几秒钟内从.3seconds增加到3seconds。

链

window.addEvent('load', function () {

    $$('body').fade('hide').set('morph', {
        duration: 3000
    }).morph({
        'opacity': '1'
    });


});

展开：

window.addEvent('load', function () {

    var el = $$('body');

    el.fade('hide'); // hide body tag

    el.set('morph', {duration: 3000});

    $$('body').morph({'opacity': '1'});


});

注意：

我同意LifeInTheGrey的不良做法，但我说我会回答你的问题。

使用MooTools平滑淡入整个网页

1 个答案:

注意：