function main() {
$('.btnBack').click(function () {
var currentSlide = $('.active-slide').stop().fadeOut(500).removeClass('active-slide');
currentSlide.prev().stop().fadeIn(500).addClass('active-slide');
});
$('.btnNext1').click(function() {
var checkedRadioButtons = $(':radio:checked[name=q1]');
if(!checkedRadioButtons.length) {
alert('please select an answer before you proceed!');
}
else {
var currentSlide = $('.active-slide').stop().fadeOut(500).removeClass('active-slide');
currentSlide.next().stop().fadeIn(500).addClass('active-slide'); }
});
$('.btnNext2').click(function() {
var checkedRadioButtons = $(':radio:checked[name=q2]');
if(!checkedRadioButtons.length) {
alert('please select an answer before you proceed!');
}
else {
var currentSlide = $('.active-slide').stop().fadeOut(500).removeClass('active-slide');
currentSlide.next().stop().fadeIn(500).addClass('active-slide'); }
});
$('.btnNext3').click(function() {
var checkedRadioButtons = $(':radio:checked[name=q3]');
if(!checkedRadioButtons.length) {
alert('please select an answer before you proceed!');
}
else {
var currentSlide = $('.active-slide').stop().fadeOut(500).removeClass('active-slide');
currentSlide.next().stop().fadeIn(500).addClass('active-slide');
}
});
}
$(document).ready(main);
function btnSubmit_onclick() {
var myForm = document.form1;
var totalScore = 0;
var value;
var q1Ans = document.getElementById('q1correct');
if(q1Ans.checked == true) {
totalScore ++;
}
var q2Ans = document.getElementById('q2correct');
if(q2Ans.checked == true) {
totalScore ++;
}
var q3Ans = document.getElementById('q3correct');
if(q3Ans.checked == true) {
totalScore ++;
}
myForm.showResults.value ="your total score is "
+ totalScore + "/3!";
}.slide {
display: none;
}
.slide.active-slide {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form name="form1" action="" method="post">
<div class="slide active-slide">
<h3>Question 1: Answer is A!</h3>
<input type="radio" name="q1" id="q1correct" >A</input><br>
<input type="radio" name="q1" >B</input><br>
<input type="radio" name="q1" >C</input><br>
<input type="radio" name="q1" >D</input>
<input type="button" class="btnBack" value="Back">
<input type="button" class="btnNext1" value="Next" >
</div>
<div class="slide">
<h3>Question 2: Answer is B! </h3>
<input type="radio" name="q2" >A</input><br>
<input type="radio" name="q2" id="q2correct">B</input><br>
<input type="radio" name="q2" >C</input><br>
<input type="radio" name="q2" >D</input>
<input type="button" class="btnBack" value="Back">
<input type="button" class="btnNext2" value="Next">
</div>
<div class="slide">
<h3>Question 3: Answer is B! </h3>
<input type="radio" name="q3">A</input><br>
<input type="radio" name="q3" id="q3correct">B</input><br>
<input type="radio" name="q3">C</input><br>
<input type="radio" name="q3">D</input>
<input type="button" class="btnBack" value="Back">
<input type="button" class="btnNext3" value="Submit"
onclick="btnSubmit_onclick()">
</div>
<div class="slide">
<h3>Your Total Score</h3>
<textarea name="showResults" rows="8" cols="40" readonly="readonly"></textarea>
<input type="button" class="btnBack" value="Back">
</div>
</form>
</body>
我正在使用JavaScript创建测验，我试图一次出现1个问题。
我已成功隐藏并通过使用jQuery和CSS更改类来显示问题。但是，动画在显示下一张幻灯片时会出现故障。下一张幻灯片显示在上一张幻灯片下，上一张幻灯片需要一段时间才能消失。
进行一些研究我已经看过我尝试使用关于animation que buildup的stop（）方法，但这似乎也无法解决问题。
我的jQuery是以下
$('.btnBack').click(function () {
var currentSlide = $('.active-slide').stop().fadeOut(500).removeClass('active-slide');
currentSlide.prev().stop().fadeIn(500).addClass('active-slide');
});
$('.btnNext1').click(function() {
var currentSlide = $('.active-slide').stop().fadeOut(500).removeClass('active-slide');
currentSlide.next().stop().fadeIn(500).addClass('active-slide'); }
});
CSS
.slide {
display: none;
}
.slide.active-slide {
display: block;
}
HTML
<div class="slide active-slide">
<h3>Question 1: Answer is A!</h3>
<input type="radio" name="q1" id="q1correct" >A</input><br>
<input type="radio" name="q1" >B</input><br>
<input type="radio" name="q1" >C</input><br>
<input type="radio" name="q1" >D</input>
<input type="button" class="btnBack" value="Back">
<input type="button" class="btnNext1" value="Next" >
</div>
<div class="slide">
<h3>Question 2: Answer is B! </h3>
<input type="radio" name="q2" >A</input><br>
<input type="radio" name="q2" id="q2correct">B</input><br>
<input type="radio" name="q2" >C</input><br>
<input type="radio" name="q2" >D</input>
<input type="button" class="btnBack" value="Back">
<input type="button" class="btnNext2" value="Next">
</div>
jQuery似乎是正确的，控制台上没有出现任何错误消息。
非常感谢您的帮助。
答案 0 :(得分：1)
如果您希望动画淡出上一个问题，然后淡入下一个问题，您需要等待淡入淡出完成才能继续使用fadeOut回调：
$('.btnBack').click(function() {
var currentSlide = $('.active-slide').stop().fadeOut(500, function() {
$(this).removeClass('active-slide');
currentSlide.prev().stop().fadeIn(500).addClass('active-slide');
});
});
$('.btnNext1').click(function() {
var currentSlide = $('.active-slide').stop().fadeOut(500, function() {
$(this).removeClass('active-slide');
currentSlide.next().stop().fadeIn(500).addClass('active-slide');
});
});
请注意，我已将fadeOut 后面的代码移动到 fadeOut回调中。
另请注意，上述情况依赖于您只有一个问题与.active-slide匹配，因为fadeOut会在每个动画元素完成时调用其回调。在我们的情况下，这只是一个，所以它很好，但值得指出。
直播示例：
$('.btnBack').click(function() {
var currentSlide = $('.active-slide').stop().fadeOut(500, function() {
$(this).removeClass('active-slide');
currentSlide.prev().stop().fadeIn(500).addClass('active-slide');
});
});
$('.btnNext1').click(function() {
var currentSlide = $('.active-slide').stop().fadeOut(500, function() {
$(this).removeClass('active-slide');
currentSlide.next().stop().fadeIn(500).addClass('active-slide');
});
});.slide {
display: none;
}
.slide.active-slide {
display: block;
}<div class="slide active-slide">
<h3>Question 1: Answer is A!</h3>
<input type="radio" name="q1" id="q1correct">A
<br>
<input type="radio" name="q1">B
<br>
<input type="radio" name="q1">C
<br>
<input type="radio" name="q1">D
<input type="button" class="btnBack" value="Back">
<input type="button" class="btnNext1" value="Next">
</div>
<div class="slide">
<h3>Question 2: Answer is B! </h3>
<input type="radio" name="q2">A
<br>
<input type="radio" name="q2" id="q2correct">B
<br>
<input type="radio" name="q2">C
<br>
<input type="radio" name="q2">D
<input type="button" class="btnBack" value="Back">
<input type="button" class="btnNext2" value="Next">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>