javascript - 使网页看起来完全加载，或 jQuery 到 MooTools 翻译

Question

我希望网页仅在加载完所有元素后才出现在浏览器中。

我通常的解决方案是延迟显示页面，直到所有元素完成加载。我在 CSS 中使用它：

body {
opacity: 0;
}

– 并将这个 jQuery 片段放在<head>页面的

<script type="text/javascript">
$(window).load(function() {
        $('body').animate({opacity: 1}, 300);
}); 
</script>

– 平滑地淡入整个页面。

但是，我正在处理的页面有链接到它的 MooTools 库。我也不想通过将 jQuery 链接到它来使页面变得更重，但是我不熟悉 MooTools，并且可以使用一些帮助。

问题：我在上面键入的 jQuery 片段的确切 MooTools 翻译是什么？

预先感谢您的帮助！

score 2 · Accepted Answer

我相信你正在寻找这个：

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

在此处的 mootools 源中变形而不是动画

所以$('block')就像说getElementById('block')得到<div id="block"></div>

$$('body')就像getElementsByTagName(body)得到<body></body>

$$('.block')也会得到<div class="block"></div>

这里的好来源

score 1 · Accepted Answer

window.addEvent('domready', function () {
    $("gallery").set('morph', {duration: 3000})
    .morph({opacity: 1});
});

'load'可能也会起作用，但从我所见domready似乎是首选。

2 回答 2