0

jquery animate 関数を使用して、ロード時に左上隅から Web サイトを展開する Web サイトに取り組んでいます。私は実際にその機能のコードを書いたわけではないので、あまり詳しくありません。一時的には機能しましたが、現時点ではまったく機能していないようです。.js ファイルがロードされて実行されていることはわかっています。これは、コードの最初のビットが「ページがロードされています」というメッセージを表示する時間遅延であるためです。しかし、ページが左上から表示されてスライドインするのではなく、すでに読み込まれているページが表示されるだけです.CSSとマークアップも含めましたが、そこに問題があるとは思いません. どんな助けでも大歓迎です！ありがとう！

注: Jquery バージョン 1.7.2 を使用しています。

CSS: 

 #builder
    {
        position:relative;
        min-height:100%;
        min-width:100%;
        z-index:999;
    }

JavaScript:

function hideIt() {

    document.getElementById("wait").style.display = "none";

}

setTimeout("hideIt()", 1000);

function showIt() {

    document.getElementById("builder").style.display = "block";
}

setTimeout("showIt()", 2500);

function build() {
    $(document).ready(function () {

        $("#builder").animate({ height: '0%', width: '0%' }, 1);
        $("#builder").animate({ height: '100%', width: '100%' }, 2000);


    });
}

マークアップ:

<body onLoad="build()">
<img src="wait.gif" id="wait" style="display:block;" />

wait.gif は、「ページを読み込んでいます」という単なる画像です...

そして、ページはこれらでラップされています:

<div id="builder" align=center style="display:none;">
4

3 に答える 3

1

#builder要素が表示される前に2.5秒間非表示になっている場合、アニメーションは要素が表示されるまでに完了します。body onLoadのインライン関数を削除して、次のことを試してください。

function hideIt() {
    $("#wait").hide();
}

function showIt() {
    $("#builder").show(2000); //should do somewhat the same as animating from the top left
}

$(function() {
    setTimeout(hideIt, 1000); //no need to quote the functions and eval them
    setTimeout(showIt, 2500);
});

あるいは単に

$("#wait").delay(1000).hide(10);
$("#builder").delay(2500).show(2000)
于 2012-07-03T01:02:55.460 に答える
0

次のようにコードを調整してみてください。 

$(document).ready(function() {
    $('#wait').hide(1000, function(){  // hide the #wait
        $("#builder").show().animate({ // then show, then animate #builder
            height: '100%',
            width: '100%'
        }, 2000);
    });
});

補足:パーセンテージと を含む要素を使用している場合は、#builder高さと幅も設定する必要があることに注意してください。

于 2012-07-03T00:52:24.730 に答える
0

あなたshow()が呼び出されるずっと前にアニメーション化されている可能性があります。したがって、表示されるまでに、アニメーションは完了します。

于 2012-07-03T00:52:42.563 に答える