Question

所以我有这个简单的jQuery脚本，它隐藏并显示点击和延迟的一些元素。我需要的是使用Javascript而不使用任何JS库。

真的很感激一些帮助。

以下是代码：

    $(document).ready(function () {
        $(".bq1").click(function () {
            $("#q1").fadeOut(0), $("#q2").fadeIn(500)
        }), $(".bq2").click(function () {
            $("#q2").fadeOut(0), $("#q3").fadeIn(500)
        }), $(".bq3").click(function () {
            $("#q3").fadeOut(0), $("#q4").fadeIn(500)
        }), $(".bq4").click(function () {
            window.scrollTo(0, 0), $("#content1").fadeOut(0), $("#content2").fadeIn(), setTimeout(function () {
                $("#result1").fadeIn(1e3)
            }, 3e3), setTimeout(function () {
                $("#result2").fadeIn(1e3)
            }, 4500), setTimeout(function () {
                $("#result3").fadeIn(1e3)
            }, 6e3), setTimeout(function () {
                $("#content2").fadeOut()
            }, 7500), setTimeout(function () {
                $("#content3").fadeIn()
            }, 7500)
        })
    });

#q2,#q3,#q4,#content1,#content2,#content3,.result {display: none; }
.bq1,.bq2,.bq3,.bq4 { cursor: pointer; padding: 3px; margin: 3px; background: grey; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="q1">
    <p class="question"><strong>Question 1 of 4:</strong> How many years have you been with our service?</p>
    <div class="button bq1">Less than 1 year</div>
    <div class="button bq1">1-5 years</div>
    <div class="button bq1">More than 5 years</div>
</div>
<div id="q2">
    <p class="question"><strong>Question 2 of 4:</strong> Have you ever used our online support?</p>
    <div class="button bq2">Yes</div>
    <div class="button bq2">No</div>
</div>
<div id="q3">
    <p class="question"><strong>Question 3 of 4:</strong> What is your primary use for our Service? </p>
    <div class="button bq3">Work</div>
    <div class="button bq3">Leisure</div>
    <div class="button bq3">Others</div>
</div>
<div id="q4">
    <p class="question"><strong>Question 4 of 4:</strong>Would you recommend our service to your friends and family?</p>
    <div class="button bq4">Yes</div>
    <div class="button bq4">No</div>
    <div class="button bq4">Maybe</div>
</div>
</div>
<div class="Mayn-content" id="content2">
    <h1 style="text-align:center;">Submitting Answers</h1>
    <div class="loading"></div>
    <p class="result" id="result1">Verifying Customer...</p>
    <p class="result" id="result2">Checking Database...</p>
    <p class="result" id="result3">Analyzing...</p>
</div>
<div class="Mayn-content" id="content3">
    <h1 style="text-align:center;">Thank you for your opinion!</h1>
</div>

Answer 1

这样的事情 - 我没有完成所有4个结果 - fadein和out可以更干净（取自http://www.chrisbuttery.com/articles/fade-in-fade-out-with-javascript/）但人们通常会收取这种自定义代码的费用

＆＃13;

// fade out

function fadeOut(el) {
  el.style.opacity = 1;

  (function fade() {
    if ((el.style.opacity -= .1) < 0) {
      el.style.display = "none";
    } else {
      requestAnimationFrame(fade);
    }
  })();
}

// fade in

function fadeIn(el, display) {
  el.style.opacity = 0;
  el.style.display = display || "block";

  (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += .1) > 1)) {
      el.style.opacity = val;
      requestAnimationFrame(fade);
    }
  })();
}
var cnt = 1;
var $ = function(sel) {
  return document.querySelectorAll(sel)
}
window.onload = function() {
  [].forEach.call($(".button"), function(button) {
    button.onclick = function() {
      var id = this.getAttribute("data-id");
      var next = "q" + (parseInt(id.substring(1),10)+1);
      console.log(id,next)
      fadeOut($("#" + id)[0]);
      if (next < "q4") {
        fadeIn($("#" + next)[0]);
      } else {
        window.scrollTo(0, 0);
        fadeOut($("#content1")[0]);
        var tId1 = setTimeout(function() {        
          fadeIn($("#content2")[0]);
          var tId2=setTimeout(function() {
            fadeIn($("#result1")[0]);
          },2000)
        },1000);  
      }
    }
  });
}

＆＃13;

#q2,
#q3,
#q4,

#content2,
#content3,
.result {
  display: none;
}
.bq1,
.bq2,
.bq3,
.bq4 {
  cursor: pointer;
  padding: 3px;
  margin: 3px;
  background: grey;
}

＆＃13;

<div id="content1">
  <div id="q1">
    <p class="question"><strong>Question 1 of 4:</strong> How many years have you been with our service?</p>
    <div class="button" data-id="q1">Less than 1 year</div>
    <div class="button" data-id="q1">1-5 years</div>
    <div class="button" data-id="q1">More than 5 years</div>
  </div>
  <div id="q2">
    <p class="question"><strong>Question 2 of 4:</strong> Have you ever used our online support?</p>
    <div class="button" data-id="q2">Yes</div>
    <div class="button" data-id="q2">No</div>
  </div>
  <div id="q3">
    <p class="question"><strong>Question 3 of 4:</strong> What is your primary use for our Service?</p>
    <div class="button" data-id="q3">Work</div>
    <div class="button" data-id="q3">Leisure</div>
    <div class="button" data-id="q3">Others</div>
  </div>
  <div id="q4">
    <p class="question"><strong>Question 4 of 4:</strong>Would you recommend our service to your friends and family?</p>
    <div class="button" data-id="q4">Yes</div>
    <div class="button" data-id="q4">No</div>
    <div class="button" data-id="q4">Maybe</div>
  </div>
</div>
<div class="Mayn-content" id="content2">
  <h1 style="text-align:center;">Submitting Answers</h1>
  <div class="loading"></div>
  <p class="result" id="result1">Verifying Customer...</p>
  <p class="result" id="result2">Checking Database...</p>
  <p class="result" id="result3">Analyzing...</p>
</div>
<div class="Mayn-content" id="content3">
  <h1 style="text-align:center;">Thank you for your opinion!</h1>
</div>

＆＃13;

使用简单的javascript使jQuery脚本工作

1 个答案: