jQuery Animate Skipping Divs

Question

我尝试使用jQuery创建一个简单的测验。我在.on上使用.animate来揭示新问题。这些问题只是在使用z-index对彼此进行排序的div之间。

我有两列。左边的那个说明了它是什么主题。右边的那个显示了问题。在几个问题之后，左栏动画显示下一个主题。

在第四个问题动画之前，一切都很棒。然后它跳到最后一个问题而没有透露下一个问题我不知道出了什么问题。我总共有10个问题，但我不想粘贴所有代码。它已经很长了......

有什么想法？谢谢！

HTML

<!-- Quiz Category Side -->
<div class="col-md-6">
    <!-- Pillar 1 -->
    <div id="pillar1">
        <div class="align">
            <h2>Subject 1</h2>
        </div>
    </div>
    <!-- Pillar 2 -->
    <div id="pillar2">
        <div class="align">
            <h2>Subject 2</h2>
        </div>
    </div>
    <!-- Pillar 3 -->
    <div id="pillar3">
        <div class="align">
            <h2>Subject 3</h2>
        </div>
    </div>
    <!-- Results -->
    <div class="align results"></div>
</div>

<!-- Quiz Answer Side -->
<!-- Question 1 Subject 1 -->
<div class="col-md-6">
    <form id="question1" class="panel">
        <div class="align">
            <h3>Question 1 XYZ?</h3>
            <div class="questions">
                <div class="question">
                    <input type="radio" name="question1" value="1" /><p class="question-text">Answer XYZ.</p>
                </div>
                <div class="question">
                    <input type="radio" name="question1" value="2" /><p class="question-text">Answer XYZ</p>
                </div>
                <div class="question">
                    <input type="radio" name="question1" value="2" /><p class="question-text">Answer XYZ</p>
                </div>
                <div class="question">
                    <input type="radio" name="question1" value="2" /><p class="question-text">Answer XYZ</p>
              </div>
            </div>
        </div>
    </form>
    <!-- Question 2 Subject 1 -->
    <form id="question2" class="panel">
        <div class="align">
            <h3>Question 2 XYZ?</h3>
            <div class="questions">
                <div class="question">
                    <input type="radio" name="question2" value="1" /><p class="question-text">Answer XYZ</p>
                </div>
                <div class="question">
                    <input type="radio" name="question2" value="2" /><p class="question-text">Answer XYZ</p>
                </div>
                <div class="question">
                    <input type="radio" name="question2" value="2" /><p class="question-text">Answer XYZ</p>
                </div>
                <div class="question">
                    <input type="radio" name="question2" value="2" /><p class="question-text">Answer XYZ</p>
              </div>
            </div>
        </div>
    </form>
    <!-- Question 3 Subject 1 -->
    <form id="question3" class="panel">
        <div class="align">
            <h3>Question 3 XYZ?</h3>
            <div class="questions">
                <div class="question">
                    <input type="radio" name="question3" value="1" /><p class="question-text">Answer XYZ.</p>
                </div>
                <div class="question">
                    <input type="radio" name="question3" value="2" /><p class="question-text">Answer XYZ</p>
                </div>
                <div class="question">
                    <input type="radio" name="question3" value="2" /><p class="question-text">Answer XYZ</p>
                </div>
                <div class="question">
                    <input type="radio" name="question3" value="2" /><p class="question-text">Answer XYZ</p>
              </div>
            </div>
        </div>
    </form>
    <!-- Question 4 Subject 1 -->
    <form id="question4" class="panel">
        <div class="align">
            <h3>Question 4 XYZ?</h3>
            <div class="questions">
                <div class="question">
                    <input type="radio" name="question4" value="1" /><p class="question-text">Answer XYZ</p>
                </div>
                <div class="question">
                    <input type="radio" name="question4" value="2" /><p class="question-text">Answer XYZ</p>
                </div>
                <div class="question">
                    <input type="radio" name="question4" value="2" /><p class="question-text">Answer XYZ</p>
                </div>
            </div>
        </div>
    </form> 
    <!-- Question 5 Subject 2 -->
    <form id="question5" class="panel">
        <div class="align">
            <h3>Question 5 XYZ</h3>
            <div class="questions">
                <div class="question">
                    <input type="radio" name="question5" value="1" /><p class="question-text">Answer XYZ</p>
                </div>
                <div class="question">
                    <input type="radio" name="question5" value="2" /><p class="question-text">Answer XYZ</p>
                </div>
                            <div class="question">
                    <input type="radio" name="question5" value="1" /><p class="question-text">Answer XYZ</p>
                </div>
                <div class="question">
                    <input type="radio" name="question5" value="2" /><p class="question-text">Answer XYZ</p>
                </div>
            </div>
        </div>
    </form>         
    <!-- Question 6 Subject 2 -->
    <form id="question6" class="panel">
        <div class="align">
            <h3>Question 6 XYZ?</h3>
            <div class="questions">
                <div class="question">
                    <input type="radio" name="question6" value="1" /><p class="question-text">Answer XYZ.</p>
                </div>
                <div class="question">
                    <input type="radio" name="question6" value="2" /><p class="question-text">Answer XYZ</p>
                </div>
                <div class="question">
                    <input type="radio" name="question6" value="2" /><p class="question-text">Answer XYZ</p>
                </div>
                <div class="question">
                    <input type="radio" name="question6" value="2" /><p class="question-text">Answer XYZ</p>
              </div>
            </div>
        </div>
    </form> 

CSS

.container, .container2 {
    width: 200px;
    height: 200px;
    position: relative;
    float: left;
}

#question1, #question2, #question3, #question4, #question5, #question6, #pillar1, #pillar2, #pillar3 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: table;
}

#question1, #question2, #question3, #question4, #question5, #question6 {
    background-color: white;
}

#question1 {
    z-index: 100;
}

#question2 {
    z-index: 90;
}

#question3 {
    z-index: 80;
}

#question4 {
    z-index: 70;
}

#question5 {
    z-index: 60;
}

#question6 {
    z-index: 50;
}

#pillar1 {
    z-index: 30;
    background-color: yellow;
}

#pillar2 {
    z-index: 20;
    background-color: red;
}

#pillar3 {
    z-index: 10;
    background-color: blue;
}

.align {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.questions {
    padding-left: 25%;
    margin-top: 20px;
}

.question {
    text-align: left;
}

.question-text {
    display: inline-block;
    margin: 10px;
}

JS

// question 1
$('#question1 input').on('change', function () {
    var $questionAnswer1 = $('input[name=question1]:checked', '#question1').val();

    $('#question1').animate({
        'left': '2000px'
    }, 3000); 
});

//question 2
$('#question2 input').on('change', function () {
    var $questionAnswer2 = $('input[name=question2]:checked', '#question2').val();

    $('#question2').animate({
        'left': '2000px'
    }, 3000); 
});

//question 3
$('#question3 input').on('change', function () {
    var $questionAnswer3 = $('input[name=question3]:checked', '#question3').val();

    $('#question3').animate({
        'left': '2000px'
    }, 3000); 
});    

//question 4
$('#question4 input').on('change', function () {
    var $questionAnswer4 = $('input[name=question4]:checked', '#question4').val();

    $('#question4').animate({
        'left': '2000px'
    }, 3000); 

    $('#pillar1').animate({
        'left': '-2000px'
    }, 3000);
});      

//question 5
$('#question5 input').on('change', function () {
    var $questionAnswer5 = $('input[name=question5]:checked', '#question5').val();

    $('#question5').animate({
        'left': '2000px'
    }, 3000); 
});

//question 6
$('#question6 input').on('change', function () {
    var $questionAnswer6 = $('input[name=question6]:checked', '#question6').val();

    $('#question6').animate({
        'left': '2000px'
    }, 3000); 
});

//question 7
$('#question7 input').on('change', function () {
    var $questionAnswer7 = $('input[name=question7]:checked', '#question7').val();

    $('#question7').animate({
        'left': '2000px'
    }, 3000); 

    $('#pillar2').animate({
        'left': '-2000px'
    }, 3000);
});