使用MooTools在整个Web页面中平滑地褪色 [英] Smoothly Fade In Entire Web Page With MooTools

问题描述

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

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

其中一个StackOverflow专家建议您使用这个MooTools代码片段作为解决方案：

  $$（'body'）。set（'morph'，{duration：300}）。morph（{'opacity'：'1'} ）; 
}）; 
  

问题：由于某些原因，该片段使得背景立即出现，然后，一秒钟后，页面弹出，没有任何淡入淡出的效果。很可能是我没有做正确的事情。

我会感谢一位知识渊博的人的一些建议。

解决方案

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

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

我从 300 到 3000 其中以秒为单位从 .3seconds code> 3秒。

链接：

 code> window.addEvent（'load'，function（）{
 
 $$（'body'）。fade（'hide'）。set（'morph'，{
持续时间：3000 
}）。morph（{
'opacity'：'1'
}）; 
 
 
}）; 
  

扩展：

 code> window.addEvent（'load'，function（）{
 
 var el = $$（'body'）; 
 
 el.fade（'hide '）; //隐藏body标签
 
 el.set（'morph'，{duration：3000}）; 
 
 $$（'body'）。 'opacity'：'1'}）; 
 
 
}）; 
  

注意：

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

I want to fade in an entire web page after all its elements finished loading. The web page includes the background image repeated left to right, and the main content area with some text and pictures. I assume I should set body opacity to 0 in CSS, and use JavaScript code to fade in the page.

I have to use MooTools, more specifically, version 1.2.6, because that library is already linked to the page (and shouldn't be upgraded to a more recent version, for a number of reasons).

One of the StackOverflow experts suggested this MooTools snippet as a solution:

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

PROBLEM: for some reason, instead of smoothly fading in the page, the snippet makes the background appear right away, and then, a second or so later, the page pops up, without any fade-in effect. Most likely it's me who's not doing things right.

I'd appreciate a bit of advice from a knowledgeable person.

解决方案

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.

这篇关于使用MooTools在整个Web页面中平滑地褪色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！