JavaScript测验-使用jQuery(animation Que Buildup）更改类时，动画出现故障

JavaScript Quiz – animation has glitch when changing classes with jQuery (Animation Que Buildup)

本文关键字：动画 故障 使用 测验 jQuery Buildup Que animation JavaScript      更新时间：2023-09-26

      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创建一个测试，尝试一次出现一个问题。

通过使用jQuery和CSS更改类，我成功地隐藏并显示了问题。但是，在显示下一张幻灯片时，动画出现故障。下一张幻灯片显示在上一张幻灯片下面，上一张需要一段时间才能消失。

在做一些研究时，我看到我尝试过使用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看起来是正确的，控制台上没有显示任何错误消息。

非常感谢你的帮助。

如果你想让动画淡出前一个问题，然后淡出下一个问题。你需要等待淡出完成，然后使用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>

相关文章：