Question

我遵循了一个教程并获得了一个使用Javascript并且没有CSS的HTML格式的fadeIn效果

听起来真的很蠢但我不知道如何才能迈出第三步淡出第三步

<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() {
                                });
                });

        });
});

试试这个

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

2 个答案: