代码之家 › 专栏 › 技术社区 › Dimitri Vorontzov

使用MooTools平滑淡入整个网页

mootools1.2 mootools dom javascript

1

Dimitri Vorontzov · 技术社区 · 12 年前

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

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

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

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

问题: 出于某种原因,这个片段并没有在页面中平滑地淡入,而是让背景立即出现,然后,大约一秒钟后,页面弹出,没有任何淡入效果。很可能是我做得不对。

如果有知识渊博的人给我一些建议,我将不胜感激。

1 回复 | 直到 12 年前

1

2

David Chase 12 年前

你的问题的答案是做以下事情。

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