javascript toggle animation issue

Question

I am doing a small javascript animation. this is my code :

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

i am using above code for simple animation. i need to get the result 250 on the first click, as well second click i has to get 0 value. but it showing the 250 with unchanged. but i am assigning the value to set '0', once the div height reached to '0'.

what is the issue with my code? any one help me?

Answer 1

Everytime you click on the div the divHeight variable is reset to 250, thus your code never calls slideDwn. Moving the divHeight declaration outside the event handler should do the trick.

Also, your div wont have the correct size when any of the 2 animations end. You're setting the divHeight variable to 250 or 0 correctly, but never actually setting anima.style.height after that.

Answer 2

I've rewritten your code into something simpler and lighter. The main difference here is that we're using a single slide() function here, and that the height of the div in question is stored in a variable beforehand to ensure that the element slides into the correct position.

Note that this is a very simplistic implementation and assumes that the div carries no padding. (The code uses ele.clientHeight and ele.style.height interchangeably, which admittedly, is a pretty bad choice, but is done here to keep the code simple)

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

See http://www.jsfiddle.net/yijiang/dWJgG/2/ for a simple demo.