如何在javascript中添加第三个fadeIn效果？

Question

我遵循了一个教程，并在没有Java脚本的HTML中使用了淡入效果

这听起来真的很傻，但是我不知道该如何使第二步淡入第三步

<script type="text/javascript">
    $(document).ready(function() {
        $('#weiter').click(function() {

            $('#age option:selected').each(function() {
                if ($(this).val() == "no") alert('Why.');
                if ($(this).val() == "under") alert('Hallo');
                if ($(this).val() == "ok") {
                    $('#step1').fadeOut('fast', function() {
                        $('#step2').fadeIn('fast');
                    });
                }
            });
        });
    });
</script>

        <div id="step1">
            Hello
            <p align="center">
                <input id="weiter" class="btn" type="button" value="Next&raquo;">
            </p>
        </div>

        <div id="step2">
            Welcome
            <p align="center">
                <input id="weiter" class="btn" type="button" value="Next&raquo;">
            </p>
        </div>

        <div id="step3">
            Bye
        </div>

Answer 1

从技术上讲，您可以执行以下操作：

$('#step1').fadeOut('fast', function() {
    $('#step2').fadeIn('fast', function(){
        $('#step3').fadeIn('fast');
    });
});

另外，有许多用于执行这种顺序动画的插件。 完全公开； 其中之一是我的。 我在遇到相同问题时创建了它： https : //github.com/fillswitch/Jquery-Sequential-Animations

Answer 2

 $('#step1').fadeOut('fast', function() {
       $('#step2').fadeIn('fast', function() {

                 $('#step2').fadeOut('fast', function() {
                                $('#step3').fadeIn('fast', function() {
                                });
                });

        });
});

尝试这个