javascript切换动画问题

Question

我正在做一个小的 javascript 动画。这是我的代码:

window.onload = function () {
  var heading = document.getElementsByTagName('h1')[0];
  heading.onclick = function () {

    var divHeight = 250;
    var speed = 10;
    var myInterval = 0;

    alert(divHeight);
    slide();

    function slide() {
      if (divHeight == 250) {
        myInterval = setInterval(slideUp, 30);
      } else {
        myInterval = setInterval(slideDwn, 30);
        alert('i am called as slide down')
      }
    }

    function slideUp() {
      var anima = document.getElementById('anima');
      if (divHeight <= 0) {
        divHeight = 0;
        anima.style.height = '0px';
        clearInterval(myInterval);
      } else {
        divHeight -= speed;
        if (divHeight < 0) divHeight = 0;
        anima.style.height = divHeight + 'px';
      }
    }

    function slideDwn() {
      var anima = document.getElementById('anima');
      if (divHeight >= 250) {
        divHeight = 250;
        clearInterval(myInterval);
      } else {
        divHeight += speed;
        anima.style.height = divHeight + 'px';
      }
    }
  }
}

我正在使用上面的代码制作简单的动画。我需要在第一次点击时获得结果 250，第二次点击我必须获得 0 值。但它显示 250 不变。但是当 div 高度达到“0”时，我将值设置为“0”。

我的代码有什么问题？有人帮帮我吗？

Answer 1

每次单击 div 时，divHeight 变量都会重置为 250，因此您的代码永远不会调用 slideDwn。将 divHeight 声明移到事件处理程序之外应该可以解决问题。

此外，当 2 个动画中的任何一个结束时，您的 div 都不会具有正确的大小。您将 divHeight 变量正确设置为 250 或 0，但之后从未真正设置 anima.style.height。