1

すべての要素の読み込みが完了した後、Web ページ全体をフェードインしたいと考えています。Web ページには、左から右に繰り返される背景画像と、いくつかのテキストと画像を含むメイン コンテンツ領域が含まれます。CSS で body opacity を 0 に設定し、JavaScript コードを使用してページをフェードインする必要があると思います。

MooTools、より具体的にはバージョン 1.2.6 を使用する必要があります。これは、そのライブラリが既にページにリンクされているためです (いくつかの理由により、より新しいバージョンにアップグレードするべきではありません)。

StackOverflow の専門家の 1 人が、この MooTools スニペットを解決策として提案しました。

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

問題:何らかの理由で、スニペットがページ内でスムーズにフェードインするのではなく、すぐに背景を表示し、1 秒ほど後にページがフェードイン効果なしでポップアップします。ほとんどの場合、正しいことをしていないのは私です。

有識者の方からのアドバイスをいただければ幸いです。

4

1 に答える 1

2

あなたの質問への答えは、次のことを行うことです。

スタイルシートの CSS を削除し、opacity:0;このコードを自分のものから調整して使用します

私は からまで秒単位で から300まで増やしました。3000.3seconds3seconds

連鎖:

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 に答える