0

我将 Visual Studio 2012 用于我的空 Web 应用程序项目，并且我在 PageLoad 上设置了对象的 Timed fadeIn 效果，但我认为这种方式有点糟糕。我认为像这样使用的 setTimeout 函数使用了很多计时器，这是一种浪费。第一个计时器结束在 1000 毫秒内秒计时器在 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);
            });
        });

ETC...

这将在第一个动画完成后触发下一个动画，无需额外的延迟

于 2013-11-06T22:00:17.930 回答
0

如果您只想将它​​们全部淡入，您可以在单个选择器中调用所有对象并使用回调循环的函数将它们全部淡入：

$(function() {
    function fadeObjs(objs) {
        if (objs.length >0) {
            var ele = objs.eq(0);
            ele.fadeIn(1000,function() {
                fadeObjs(objs.slice(1));
            });
        }
    }

    var objs = $('#Panel1,#Image2,#Panel3,#Image4,#Panel5');
    objs.hide();
    fadeObjs(objs);
});

如果要延迟，请使用 jQuery 延迟在 fadeIn 之前添加延迟：

ele.delay(1000).fadeIn(1000,function() {
    fadeObjs(objs.slice(1));
});

如果您需要不同的淡入淡出速度或延迟，jfriends 方法很好，或者您可以将速度和延迟作为参数制作一个对象列表

$(function() {
    var objs = { '#Panel1':[1000,1000],'#Image2':[1000,1000],'#Panel3':[1500,1000],'#Image4':[1000,200],'#Panel5':[1500,500] };
    for (k in objs) {
        $(k).hide().delay(objs[k][1]).fadeIn(objs[k][0]);
    }
});
于 2013-11-06T22:31:19.923 回答