javascript - 在页面加载时使对象定时淡入效果的另一种方法

Question

我正在将 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>

Answer 1

你可以这样做:

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

等等...

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