How can I add a third fadeIn effect in javascript?

Question

I followed a tutorial and got a fadeIn effect working in HTML with Javascript and no CSS

This sounds really dumb but I have no Idea how can I make the second step to fade to a third step

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

I added $('#step3').fadeIn('fast'); but it still didn't work — ekclone, Oct 15 '14 at 17:05

score 1 · Answer 1 · answered Oct 15 '14 at 17:07

1

Technically, you could do:

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

Also, there are many plugins for doing this kind of sequential animations. Full discosure; one of those are mine. I created it a while back when I had the same problem: https://github.com/fillswitch/Jquery-Sequential-Animations

answered Oct 15 '14 at 17:07

Fillip Peyton

3,637
2
32
60

hmmm when I press the "next" button now nothing shows up, as I'm not allowed to use a plugin as my boss thinks they are all keyloggers – ekclone Oct 15 '14 at 17:14
@ekclone - Sounds like your boss is a moron. – j08691 Oct 15 '14 at 17:15
Lol. You could also just copy the code from my plugin's files :P – Fillip Peyton Oct 15 '14 at 17:20
Also, its a little hard to troubleshoot with a JS Fiddle when we're missing some HTML; namely this `#age` element. Could you provide a JS fiddle? Or at least more HTML? – Fillip Peyton Oct 15 '14 at 17:23

score 0 · Answer 2 · answered Oct 15 '14 at 17:24

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

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

        });
});

Try this

How can I add a third fadeIn effect in javascript?

2 Answers2