1

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

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

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

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

问题：由于某种原因，该片段没有平滑地淡入页面，而是立即出现背景，然后大约一秒钟后，页面弹出，没有任何淡入效果。很可能是我做的不对。

我很感激一位知识渊博的人的一些建议。

4

1 回答 1

2

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

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

我从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 关于不良做法的观点，但我说我会回答你的问题。

于 2013-04-08T17:26:36.553 回答