0

ローディング アニメーションを含む単純な表示/非表示スクリプトを作成しました。しかし、読み込みアニメーションは少なくとも 0.5 秒は必要です。

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#loading').hide();
        $('#notesunlimitedcontent').hide();
        $('#notescontent').show();

        $('a#nsetcontent').click(function () {
            $('#loading').show();
            $('#notesunlimitedcontent').hide();
            $('#notescontent').show();
            $('#loading').hide();
        });


        $('a#nusetcontent').click(function () {
            $('#loading').show();
            $('#notescontent').hide();
            $('#notesunlimitedcontent').show();
            $('#loading').hide();
        });

    });
</script>


<a id="nsetcontent" href="#">show</a>
<a id="nusetcontent" href="#">show</a>


<div id="loading">
    <img src="loading.gif"/>
</div>
<div id="notescontent">
</div>
<div id="notesunlimitedcontent">
</div>

jqueryは初めてなので、正しくコーディングしたかどうかはわかりません。しかし、私はそれをテストしました、それは2つのdivを表示および非表示にしますが、読み込み中のdivでそれが起こるのを見ませんでした。

ロード時間を少なくとも 0.5 秒にする方法を誰かが説明してくれることを願っています。

ありがとうございました！

4

6 に答える 6

1

あなたが使用することができます

.hide(500);と.show(500);

.slideUp(500);と 。slideDown(500);

.fadeOut(500);と.fadeIn(500);

于 2013-08-25T14:06:44.023 に答える
1

.show.hideクリスチャンがコメントで提案したように、オプションの引数を渡さない限り、アニメーション化されません。

.fadeInフェード効果を使用するには、とを使用できます.fadeOut。オプションの引数 for を受け入れます (および,speedのようないくつかの定数を受け入れます)。slowfast

于 2013-08-25T14:02:43.667 に答える
0

使用する ：

.show('slow');

.hide('slow');

また

.fadeIn('slow');//instead of show()

.fadeOut('slow');// instead of hide

' ' の代わりに、ミリ秒slowとして取得される数値を指定することもできます。

例:.show(1000)など。

乾杯

于 2013-08-25T14:03:47.390 に答える
0

私は最終的にタイムアウトで動作するようになりました:

setTimeout(function() {
      // Do something after 0.5 seconds
}, 500);

したがって、jquery コードは次のようになります。

<script type="text/javascript">
    $(document).ready(function () {
        $('#loading').hide();
        $('#notesunlimitedcontent').hide();
        $('#notescontent').show();

        $('a#nsetcontent').click(function () {
            $('#loading').show();
            setTimeout(function() {
                $('#notesunlimitedcontent').hide();
            }, 500);
            $('#notescontent').show();
            setTimeout(function() {
                $('#loading').hide();
            }, 500);
        });


        $('a#nusetcontent').click(function () {
            $('#loading').show();
            setTimeout(function() {
                $('#notescontent').
            }, 500);
            $('#notesunlimitedcontent').show();
            setTimeout(function() {
                $('#loading').hide();
            }, 500);
        });

    });
</script>

必要なアニメーションを説明するために、背景が透明で、読み込み中の .gif を示す画像を含む div があります。これにより、変更されたコンテンツがオーバーレイされます。

しかし、皆さん、迅速な対応に感謝しています!

于 2013-08-26T10:00:30.887 に答える
0

使用できます

.show(5000);
.hide("slow");

たぶん、何が起こっているのかがわかります。

于 2013-08-25T14:06:12.680 に答える
0

最新のブラウザーでこれを行う最善の方法は、 css トランジションを使用してから、要素の不透明度を明示的に変更することだと思います。したがって、代わりに、$('#loading').show()あなたができるようなことをする$('#loading').css('opacity', 1)場合、および要素を非表示にしたい場合は、css() の 2 番目の引数に 0 を渡すことを除いて同じことを行います。

次に、css ファイルで、次のようにさまざまな要素で再利用できる「.fadeable」クラスを作成することができます。

.fadeable {
    -webkit-transition: opacity 500ms linear
    -moz-transition: opacity 500ms linear
    -o-transition: opacity 500ms linear
    transition: opacity 500ms linear
}

次に、これらのクラスを #loading や #notescontent などのフェードしたい要素にアタッチします。fadeIn()/fadeOut() よりもトランジションを使用する利点は、ブラウザーのネイティブ アニメーション エンジンを使用することで大幅なパフォーマンスの向上が得られることです。また、js タイマーを解放して、実行する必要のある他のタスクを実行するだけでなく、実行する必要がある他のタスクを処理できるようにします。アニメーション イベントを実行します。ただし、古いブラウザーと IE9 をサポートする必要がある場合は、jQuery のアニメーション メソッドにフォールバックすることをお勧めします。

于 2013-08-25T14:24:54.900 に答える