Javascript to switch animation

Question

I am doing a little 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 use the code above for simple animation. I need to get the result of 250 on the first click, and the second click I should get the value 0. but it shows 250 unchanged. but I assign a value to set to "0" as soon as the height of the div reaches "0".

What is the problem with my code? Does anyone help me?

Answer 1

I adjusted your code a bit (see 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 2

, div, divHeight reset 250, slideDwn. divHeight .

, div , - . divHeight 250 0, anima.style.height .

Answer 3

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

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

Answer 4

use 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() {

$ ('# div'). slideUp ('slow', function () {

}); });