javascript bascule animation numéro

Question

Je fais une petite animation javascript. ceci est mon 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'; 
     } 
    } 
    } 
} 

J'utilise le code ci-dessus pour l'animation simple. J'ai besoin d'obtenir le résultat 250 sur le premier clic, ainsi que le deuxième clic, je dois obtenir la valeur 0. mais il montre le 250 avec inchangé. mais j'affecte la valeur pour mettre '0', une fois que la hauteur de div a atteint '0'.

Quel est le problème avec mon code? quelqu'un m'aider?

Answer 1

J'ai corrigé votre code un peu (Voir 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

utilisation jquery

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

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

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

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

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

$ ('# div'). SlideUp ('lente', fonction() {

}); });

Answer 3

Chaque fois que vous cliquez sur la div, la variable divHeight est réinitialisée à 250, votre code n'appelle donc jamais slideDwn. Déplacer la déclaration divHeight en dehors du gestionnaire d'événements devrait faire l'affaire.

De plus, votre div n'aura pas la bonne taille lorsque l'une des deux animations se terminera. Vous définissez la variable divHeight sur 250 ou 0 correctement, mais ne définissez jamais anima.style.height après cela.

Answer 4

J'ai réécrit votre code en quelque chose de plus simple et plus léger. La principale différence ici est que nous utilisons une seule fonction slide() ici, et que la hauteur de la div en question est stockée dans une variable à l'avance pour s'assurer que l'élément glisse dans la bonne position. Notez qu'il s'agit d'une implémentation très simpliste et suppose que la div ne porte pas de remplissage. (Le code utilise de manière interchangeable ele.clientHeight et ele.style.height, ce qui est vrai, est un choix assez mauvais, mais il est fait ici pour garder le 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); 
    } 
} 

Voir http://www.jsfiddle.net/yijiang/dWJgG/2/ pour une démonstration simple.