0

空の Web アプリケーション プロジェクトに Visual Studio 2012 を使用していて、 PageLoad のオブジェクトの Timed fadeIn 効果を作成しましたが、この方法は私の意見ではちょっと悪いと思います。このように使用される setTimeout 関数は、無駄な多くのタイマーを使用すると思います。 1000 ミリ秒で 2 番目のタイマーが 1500 ミリ秒で終了 スクリプト全体は「木」です

これは私が作ったaspxコードです

 <script type="text/javascript" id="fadeIn1" >
        $(document).ready(function () {
            $('#Panel2').hide();
            $('#Image4').hide();
            $('#Image3').hide();
            $('#Image2').hide();
            $('#Label1').hide();
            $('#Panel3').hide();

            $('#Panel2').fadeIn(2000);
            setTimeout("$('#Image2').fadeIn(1000);", 1000);
            setTimeout("$('#Panel3').fadeIn(1000);", 1500);
            setTimeout("$('#Image3').fadeIn(2000);", 2000);
            setTimeout("$('#Label1').fadeIn(2000);", 2000);
            setTimeout("$('#Image4').fadeIn(2000);", 2000);



        });

    </script>

しかし、次のようなより良いスクリプトはどうですか:

<script type="text/javascript" id="fadeIn1" >
        $(document).ready(function () {
            $('#Panel2').hide();
            $('#Image4').hide();
            $('#Image3').hide();
            $('#Image2').hide();
            $('#Label1').hide();
            $('#Panel3').hide();

            $('#Panel2').fadeIn(2000);
            (set delay)
            $('#Image2').fadeIn(1000);
            (set delay)
            $('#Panel3').fadeIn(1000);
            (set delay)
            $('#Image3').fadeIn(2000);
            (set delay)
            $('#Label1').fadeIn(2000);
            (set delay)
            $('#Image4').fadeIn(2000);;



        });

    </script>
4

3 に答える 3

1

値のテーブルを使用してから、テーブルをループすることをお勧めします。多くのコピーされたコードを保存します:

 <script type="text/javascript" id="fadeIn1" >
    $(document).ready(function () {
        // list of items with [selector, delay time, fade time]
        var items = ["#Panel2", 0000, 1000, "#Panel3", 1500, 1000, 
                     "#Image2", 1000, 1000, "#Image3", 2000, 2000,
                     "#Image4", 2000, 2000, "#Label1", 2000, 2000];

        for (var i = 0; i < items.length; i+=3) {
            $(items[i]).hide().delay(items[i+1]).fadeIn(items[i+2]);
        }
    });

 </script>

さらに、アニメーション.delay()の代わりに使用setTimeout()でき、同じ jQuery オブジェクトで jQuery メソッドを繰り返すのではなく連鎖させることができます。

HTML も制御する場合は、これらすべてのアイテムに共通のクラスを指定し、遅延とフェード時間の情報をデータ属性として HTML に入れることができます。HTML は次のようになります。

<div id="Panel2" class="initialFade" data-delay="1000", data-fadeTime="1000"></div>
<div id="Panel3" class="initialFade" data-delay="1500", data-fadeTime="1000"></div>
...

次に、jQuery は次のようになります。

 <script type="text/javascript" id="fadeIn" >
    $(document).ready(function () {
        $(".initalFade").each(function() {
            var item = $(this).hide();
            item.delay(item.data("delay")).fadeIn(item.data("fadeTime"));
        });
    });

 </script>
于 2013-11-06T22:05:26.110 に答える
1

次のようなことができます。 

        $('#Panel2').fadeIn(2000, function () {
            $('#Image2').fadeIn(1000. function () {
                $('#Panel3').fadeIn(1000);
            });
        });

等...

これにより、追加の遅延を必要とせずに、最初のアニメーションが完了した後に次のアニメーションがトリガーされます

于 2013-11-06T22:00:17.930 に答える