javascript切换动画问题

我正在做一个小的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';
      }
    }
  }
}

window.onload=函数（）{
var heading=document.getElementsByTagName（'h1'）[0]；
heading.onclick=函数（）{
高度=250；
无功转速=10；
var-myInterval=0；
警戒（高度）；
幻灯片（）；
函数幻灯片（）{
如果（divHeight==250）{
myInterval=setInterval（幻灯片，30）；
}否则{
myInterval=setInterval（slideDwn，30）；
警报（“我被称为滑倒”）
}
}
函数slideUp（）{
var anima=document.getElementById（'anima'）；
如果（divHeight=250）{
高度=250；
clearInterval（myInterval）；
}否则{
高度+=速度；
anima.style.height=divHeight+'px'；
}
}
}
}

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

---

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

每次单击div时，

divHeight

变量被重置为250，因此您的代码从不调用

slideDwn

。将

divHeight

声明移到事件处理程序之外应该可以做到这一点

---

另外，当两个动画中的任何一个结束时，您的div的大小都不正确。您正在将

divHeight

变量正确设置为250或0，但此后从未实际设置

anima.style.height

。

我已对您的代码进行了一些更正（请参阅）

window.onload=函数（）{
var heading=document.getElementsByTagName（'h1'）[0]；
var anima=document.getElementById（'anima'）；
高度=250；
heading.onclick=函数（）{
无功转速=10；
var-myInterval=0；
函数slideUp（）{
高度-=速度；
如果（divHeight=250）{
高度=250；
clearInterval（myInterval）；
}
anima.style.height=divHeight+'px'；
}
函数幻灯片（）{
控制台日志（高度）
如果（divHeight==250）{
myInterval=setInterval（幻灯片，30）；
}否则{
myInterval=setInterval（slideDwn，30）；
}
}
幻灯片（）；
}
}​

我已将您的代码改写为更简单、更轻巧的代码。这里的主要区别在于，我们在这里使用了一个

slide（）

函数，并且所讨论的div的高度预先存储在一个变量中，以确保元素滑动到正确的位置

注意，这是一个非常简单的实现，并且假设div不带填充。（代码交替使用

ele.clientHeight

和

ele.style.height

，这是一个非常糟糕的选择，但在这里这样做是为了保持代码简单）

var heading=document.getElementsByTagName（'h1'）[0]，
anima=document.getElementById（'anima'），
divHeight=anima.clientHeight，
速度=10，
myInterval=0，
动画=假；
功能幻灯片（速度、目标）{
if（Math.abs（anima.clientHeight-goal）0）{
anima.style.height=（anima.clientHeight-速度）+“px”；
}否则{
anima.style.height=（anima.clientHeight+速度）+“px”；
}
}
heading.onclick=函数（）{
如果（！设置动画）{
动画=真；
var-goal=（anima.clientHeight>=divHeight）？0:divHeight；
myInterval=setInterval（幻灯片，13，速度，目标）；
}
}

---

请参阅以获取一个简单的演示

你能解释一下什么是：myInterval=setInterval（幻灯片，13，10，目标）？您已经使用了13,10..@3gweb

setInterval

可以接受不同数量的参数。第一个是函数，第二个是调用函数的时间间隔，之后的任何内容都将传递给函数。因此，通过传入

speed

（不是10，我的错误）和

goal

，我们基本上是在函数运行时将这两个变量传递给函数。很好。非常感谢。最后一个疑问是为什么要设置布尔值的动画？你正在用它把假变为真，把真变为假。没有开关，它自己就可以正常工作，对吗？那么为什么要使用它？@3gweb设置

动画

布尔值是为了防止多个动画同时发生，因为如果发生这种情况，

myInterval

将被覆盖，并且上一个间隔永远无法清除，因此我们需要检查该变量以阻止它发生。我同意。你的代码是完美的。你做得很好。坚持下去。如果你有twitter id或博客，请告诉我。它可以帮助我通过你的想法来更新我自己。

window.onload = function () {

  var heading = document.getElementsByTagName('h1')[0];
  var anima = document.getElementById('anima');
  var divHeight = 250;

  heading.onclick = function () {
    var speed = 10;
    var myInterval = 0;

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

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

    function slide() {
      console.log(divHeight )
      if (divHeight == 250) {
        myInterval = setInterval(slideUp, 30);
      } else {
        myInterval = setInterval(slideDwn, 30);
      }
    }

    slide();
  }
}​

var heading = document.getElementsByTagName('h1')[0],
    anima = document.getElementById('anima'),
    divHeight = anima.clientHeight,
    speed = 10,
    myInterval = 0,
    animating = false;

function slide(speed, goal) {
    if(Math.abs(anima.clientHeight - goal) <= speed){
        anima.style.height = goal + 'px';
        animating = false;
        clearInterval(myInterval);
    } else if(anima.clientHeight - goal > 0){
        anima.style.height = (anima.clientHeight - speed) + 'px';
    } else {
        anima.style.height = (anima.clientHeight + speed) + 'px';
    }
}

heading.onclick = function() {
    if(!animating) {
        animating = true;
        var goal = (anima.clientHeight >= divHeight) ? 0 : divHeight;
        myInterval = setInterval(slide, 13, speed, goal);
    }
}