JavaScript 测验 – 使用 jQuery 更改类时动画出现故障(Animation Que Buildup)-6ren

JavaScript 测验 – 使用 jQuery 更改类时动画出现故障(Animation Que Buildup)

转载作者：行者123 更新时间：2023-11-28 16:03:58

      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 似乎正确，控制台上没有出现错误消息。

非常感谢您的帮助。

最佳答案

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

关于JavaScript 测验 – 使用 jQuery 更改类时动画出现故障(Animation Que Buildup)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39544040/

文章推荐： php - 如何将 php 变量值传递给 javascript

文章推荐： jquery - addClass 函数没有按预期工作

文章推荐： html - 同一行上的 Logo 和文本样式 CSS

文章推荐： ios - 推送通知问题 iOS TestFlight

JavaScript 故障
有人可以解释一下为什么这个脚本不起作用吗？ function destroy(ID) { if (confirm("Deleting is a very bad thing! Sure?")
wcf - Silverlight 故障
我正在尝试使 WCF Silverlight 故障按此方式工作: MSDN aricle 将 SL 故障添加到我的 Web.config 文件后，我收到以下警告: The element 'behav
Haskell mod 故障？
这是我要删除的 Haskell 函数 2::Int和 5::Int从列表中: remPrimesFactors25 :: [Int] -> [Int] remPrimesFactors25 [] =
FFmpeg DTS 故障
当我想用 ffmpeg 连接和录制两个 mp4 视频时，我遇到了这个问题。我得到的输出是: [concat @ 0x2566e80] DTS 4079 #0:0 (h264 (native) ->
delphi - SetCursorPos 故障？
我想在delphi中编写一个程序来模拟以特定速度移动的鼠标指针(类似于AutoIT MouseMove函数)。要么是我的代码错误，要么是 SetCursorPos 在被调用太多次后出现故障。这是我的功
JavaScript 故障，无法正确重定向
我将“wa、or 和 id”(来自这些州的访问者)设置为重定向到 website1.com - 当我访问该网站时，它会将我重定向到 website1.com(因此它知道我在 WA) 。但如果我将 wa
WCF - 故障/异常与消息
我们目前正在争论通过 WCF channel 抛出错误与传递指示状态或服务响应的消息是否更好。故障带有 WCF 的内置支持，您可以使用内置的错误处理程序并做出相应的 react 。然而，这会带来开销
r - c() 故障？
不确定我在这里做错了什么，如果有任何帮助，我们将不胜感激。尝试创建一个名为“control”的新变量，并在行变量等于这些数字时将其编码为 1，否则编码为 0。 data$control= ifels
.net - 遥测采样而不影响错误/故障
我想在应用洞察中记录成功调用的百分比。我看到这篇文章https://learn.microsoft.com/en-us/azure/azure-monitor/app/sampling我认为固定速率采
python - 如何区分Python或Matlab是否错误/故障？
我正在尝试使用 SVD 和特征分解来使用动态模式分解进行一些数据分析。我遇到了一个简单的问题，即从 Matlab 和 Python 获得不同的结果。我很困惑，不知道为什么 Python 给我错误的结果
php - 我迫切需要帮助来排除mysqli_error()故障。
This question already has an answer here: mysqli_fetch_assoc() expects parameter / Call to a member
c - 结构链接表分段-故障
我刚刚开始我的一个实验室，在那里我计算类(class)的 GPA，其信息存储在结构的链接列表中。截至目前，我正在尝试打印所有类(class)信息，以确保它们已正确初始化并添加到链接列表中。我遇到了一
c++ - GetWindowText 故障
我正在尝试学习如何使用 visual studio 为 C++ 制作 GUI。但是我在使用 GetWindowText() 函数时遇到了一些问题。它不会将 LPTSTR 标题更改为文本框中的文本，并且
ios - NSNumberFormatter 故障
我有一个奇怪的问题。它似乎只出现在测试者的 iPhone 5s 上。它可以在运行最新 iOS (8.3) 的 iPhone 5、6 和 6 plus 上正常运行。这是代码 -(NSString *)
ios - 更新核心数据记录<故障>
我正在尝试更新 Core Data 中的一些记录。我正在采取以下步骤来完成它带谓词的获取函数从核心数据中检索记录将结果集存储在对象数组中遍历数组并更新每条记录调用保存上下文我遇到了两个问题
iphone - viewWithTag 故障。
我通过 Storyboard设计了 tableView，在一个单元格中我有一个按钮和一个标签。按钮在 Storyboard上有标签 1 和标签在 Storyboard上有标签 2。在 cellForR
ios - textFieldShouldEndEditing 故障？
我实现了这个方法，当在文本字段中输入了未经授权的字符或已使用的用户名时，向用户发送多个警报 View : func textFieldShouldEndEditing(textField: UITex
C++ Rnd() 故障
伙计们，我在运行程序时遇到了这个非常奇怪的错误。这是重要的代码: 变量(编辑): const short int maxX = 100; const short int maxZ = 100; con
JavaScript 错误/故障？
我有这个修改过的 Matrix Javascript 代码，我想摆脱第一次运行的所有与自身重叠的字符串。有人知道我该如何管理吗？另外，我想在我的网页上多次使用此代码，我需要声明新变量，不是吗？但是当我
c# - COMException 故障
有谁知道是否有网站(甚至非 Microsoft)有关于 COMExceptions/HRESULTS 的详细信息。当我尝试在使用 Copy() 函数后保存我的 Excel 工作簿时，我收到此错误:

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

JavaScript 测验 – 使用 jQuery 更改类时动画出现故障(Animation Que Buildup)