jquery: problème de fonction d'animation

Question

Je commence à apprendre jquery hier. J'ai un élément div avec un contenu, et je veux le cacher en changeant sa hauteur: voici le script

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#hide").click(function(){ 
      $("#cont").animate({ 
       height: '0' 
       },1500); 
      $("#cont").hide(); 
     }); 
    }); 
    </script> 

<input type="button" value="hide" id="hide"> 
<div id="cont"> 
text here... 
</div> 

mais il ne fonctionne pas, becouse il met automatiquement display:block à l'élément #cont, donc après animation, il commence à montrer. lorsque j'essaie de définir display:none à #cont élément, cela n'arrive pas. pourriez-vous m'aider? merci

Answer 1

Vous pouvez utiliser la méthode slideUp:

La méthode .slideUp() anime la hauteur des éléments correspondants. Cela fait glisser les parties inférieures de la page, semblant masquer les éléments. Une fois que la hauteur atteint 0, la propriété de style d'affichage est définie sur none pour garantir que l'élément n'affecte plus la mise en page de la page.

$("#hide").click(function(){ 
    $("#cont").slideUp(); 
}); 

Answer 2

merci Felix Kling, cela fonctionne: mais je trouve tout à l'heure la solution avec fonction Animer aussi: il ressemble à ce

$("#hide").click(function(){ 
    $("#cont").animate({ 
    height: '0' 
    },1500).hide(1500); 
    });