Question

我正在尝试使.tankWater类的div根据用户输入的值进行动画处理。现在，我可以使用该表单，并且“开始”按钮可以正确触发，从而弹出警报。但是，使用.tankWater类为div动画的代码没有任何作用。我尝试将animate（）函数中的方程式更改为静态值，但未进行任何更改。我在任何地方都看不到任何语法错误。当有人寻求帮助时，我已经看到此方法有效，这就是我尝试该方法的原因，但是它不起作用。我在做什么错了？

感谢您的帮助！

  var domIn2, intIn2, attr2, wLevel, in01Width, in02Width, info;
var tank, in1, in2;



function set() {
  var domIn = parseInt(document.getElementById("input01").value);
  var intIn = parseInt(document.getElementById("input02").value);
  var attr = parseFloat(document.getElementById("output01").value);
  if (domIn < 1) {
    window.alert("Input must be between 1 and 1,000.");
  } else if (intIn < 1) {
    window.alert("Input must be between 1 and 1,000.");
  } else if (attr < .05) {
    window.alert("Output must be between 0.05 and 0.5.");
  } else if (attr > .5) {
    window.alert("Output must be between 0.05 and 0.5.");
  } else {
    info = [domIn, intIn, attr]
    return info;
  }
}

$(document).on("click", '#button', function() {
  var level, range, percent;

  domIn2 = info[0];
  intIn2 = info[1];
  attr2 = info[2];

  level = (domIn2 + intIn2) / attr2;
  if (level > 10000) {
    percent = 1;
  } else {
    range = 10000 - 10;
    percent = (level - 10) / range;
  }


  $(".waterTank").animate({
    height: (percent * 475) + 'px',
    top: ((percent * 185) / 2) + 'px'
  }, 2000);
  alert(percent);


});

<style type="text/css">.container {
  width: 1280px;
  height: 720px;
  background-color: #FF0000;
}

input[type=button] {
  background-color: #55BBFF;
  border: none;
  color: #FFFFFF;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

#button {
  background-color: #55BBFF;
  border: none;
  color: #FFFFFF;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

#waterShading {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 1280px;
  height: 720px;
  mix-blend-mode: overlay;
  z-index: 5;
}

.tankWater {
  position: relative;
  background-color: #2444C1;
  top: 185px;
  left: 263px;
  width: 804px;
  height: 475px;
  mix-blend-mode: normal;
  z-index: 8;
}

#tankWater {
  position: absolute;
  color: #000066;
  top: -294px;
  left: 6px;
  width: 1280px;
  height: 1320px;
  mix-blend-mode: screen;
  z-index: 4;
}

#waterIn01 {
  position: absolute;
  top: 6px;
  left: -239px;
  width: 1274px;
  height: 716px;
  mix-blend-mode: lighten;
  z-index: 3;
}

#waterIn02 {
  position: absolute;
  top: 6px;
  left: 304px;
  width: 1274px;
  height: 716px;
  mix-blend-mode: lighten;
  z-index: 2;
}

.inputPipe {
  position: absolute;
  top: 6px;
  left: -1px;
  width: 1280px;
  height: 720px;
  mix-blend-mode: screen;
  z-index: 1;
}

#bgIMG {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 1280px;
  height: 720px;
  z-index: 0;
}

#valve {
  position: absolute;
  top: 281px;
  left: 563px;
  width: 1280px;
  height: 720px;
  mix-blend-mode: darken;
  z-index: 6;
}

#Panel {
  position: absolute;
  top: 345px;
  left: 0px;
  width: 250px;
  height: 364px;
  z-index: 7;
}

.inputForm {
  position: absolute;
  top: 334px;
  left: 5px;
  width: 235px;
  height: 350px;
  z-index: 8;
}

</style>

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>LSSC Water Tank Module</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>



</head>

<body>
  <div class="container">
    <img src="https://lvscience.org/wp-content/uploads/2019/02/tankBG00.jpg" id="bgIMG" alt="#">
    <img src="https://lvscience.org/wp-content/uploads/2019/02/inputPipe01000.jpg" class="inputPipe" alt="#">
    <img src="https://lvscience.org/wp-content/uploads/2019/02/inputPipe020.jpg" class="inputPipe" alt="#">
    <div class="tankWater"></div>


    <img src="https://lvscience.org/wp-content/uploads/2019/02/tankShading0.jpg" id="waterShading" alt="#">
    <img src="https://lvscience.org/wp-content/uploads/2019/02/valveLayer0.jpg" id="valve" alt="#">
    <img src="https://lvscience.org/wp-content/uploads/2019/02/frontPanel0.jpg" id="Panel" alt="#">
    <div class="inputForm">
      <form>
        <h2 style="color: white">Domestic Employees per Year:</h2>
        <input type="text" id="input01" size="8" placeholder="10 - 1000" required>
        <h2 style="color: white">Imported Employees per Year:</h2>
        <input type="text" id="input02" size="8" placeholder="10 - 1000" required>
        <h2 style="color: white">Attrition per Year:</h2>
        <input type="text" id="output01" size="6" placeholder="0.05 to 0.5" required><br>
        <input type="button" onClick="set()" value="Set Values">
        <button type="button" id="button">Start</button>
      </form>
    </div>
  </div>
</body>

</html>

jQuery animate（）不触发

0 个答案: