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。

Answer 2

我已经将您的代码重写为更简单，更轻松的代码。这里的主要区别是我们在这里使用单个slide()函数，并且所讨论的div的高度预先存储在变量中以确保元素滑入正确的位置。

请注意，这是一个非常简单的实现，并假设div不带填充。（代码可互换地使用ele.clientHeight和ele.style.height，这无疑是一个非常糟糕的选择，但这样做是为了保持代码简单）

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);
    }
}

有关简单演示，请参阅http://www.jsfiddle.net/yijiang/dWJgG/2/。

Answer 3

我已经纠正了你的代码（见working demo）

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();
  }
}

Answer 4

使用jquery

http://api.jquery.com/toggle/

$('.yourdiv').toggle();

http://api.jquery.com/animate/

http://api.jquery.com/slideUp/

http://api.jquery.com/slideDown/

$('#clieditemid').click(function() {

$（'＃divid'）。slideUp（'slow'，function（）{

}）; }）;

javascript切换动画问题

4 个答案: