javascript toggle animation issue

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 при первом щелчке, а второй щелчок i должен получить значение 0. но он показывает 250 без изменений. но я назначаю значение для установки «0», как только высота div достигнет «0».

В чем проблема с моим кодом? кто-нибудь мне помогает?

Answer 1

я исправил свой код немного (см 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

использование JQuery

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

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

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

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

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

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

}); });

Answer 3

Каждый раз, когда вы нажимаете на div, переменная divHeight сбрасывается на 250, поэтому ваш код никогда не вызывает slideDwn. Перемещение объявления divHeight за пределами обработчика событий должно сделать трюк.

Кроме того, ваш div не будет иметь правильный размер, если какая-либо из двух анимаций закончится. Вы устанавливаете переменную divHeight равным 250 или 0, но никогда не устанавливаете anima.style.height.

Answer 4

Я переписать свой код в то проще и легче. Основное различие здесь в том, что мы используем одну функцию 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/ см для простой демонстрации.