另一种在PageLoad上使对象的定时淡入效果的方法

Another way to make Timed FadeIn effect of objects on PageLoad

本文关键字：定时 淡入 方法 对象 PageLoad 另一种      更新时间：2023-09-26

>我使用Visual Studio 2012为我的空Web应用程序项目和我使定时淡入淡出在PageLoad上的对象效果，但在我看来这种方式有点糟糕。我认为像这样使用的setTimeout函数使用了很多计时器，这是一种浪费.第一个计时器在1000ms后结束 第二个计时器在1500ms后结束，整个脚本都是"木头"

这是我制作的 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>

你可以做这样的事情： 

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

等。。。

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

我建议使用值表，然后循环访问该表。 保存大量复制的代码：

 <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>

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

$(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 延迟在淡入之前添加延迟：

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]);
    }
});
相关文章：