javascript - 如何在 javascript 中添加第三个淡入效果？

Question

我遵循了一个教程并在 HTML 中使用 Javascript 而没有使用 CSS 获得了淡入效果

这听起来很愚蠢，但我不知道我怎样才能让第二步淡出到第三步

<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