web-dev-qa-db-fra.com

jQuery animer la hauteur

J'ai un bouton et un div avec à l'intérieur du texte:

<h2>Click me</h2>
<div class="expand">Lot of text here....</div>

Je veux afficher seulement 2 lignes de texte par défaut, j'ai donc mis la hauteur à 30 pixels et le débordement caché.

Lorsque je clique sur l'élément H2, je veux animer le texte vers slideDown et si je clique une autre fois, il glissera à la hauteur par défaut (30px).

J'essaie beaucoup de choses avec jQuery, mais cela ne fonctionne pas.

ÉDITER:

J'ai aussi plus d'un "expand" et plus d'un "H2" et le texte est différent en div, donc la hauteur n'est pas fixe ... Je voudrais glisser vers la hauteur "auto" ou 100%.

Est-ce que quelqu'un peut m'aider? Merci!

jqueryanimationslide
18
Andrea Turri

Vous pouvez stocker la hauteur juste avant de la réduire à 30 pixels lors du chargement de la page, par exemple:

$(".expand").each(function() {
  $.data(this, "realHeight", $(this).height());
}).css({ overflow: "hidden", height: "30px" });

Ensuite, dans votre gestionnaire click:

$("h2").toggle(function() {
  var div = $(this).next(".expand")
  div.animate({ height: div.data("realHeight") }, 600);
}, function() {
  $(this).next(".expand").animate({ height: 30 }, 600);
});

Donc, ce que cela fait est d'obtenir le .height() (exécuter ceci dans document.ready) avant le overflow: hidden qu'il a défini et le stocke via $.data() , puis dans les gestionnaires click (via .toggle() pour alterner), nous utilisons cette valeur (ou 30) tous les deux clics pour .animate() pour.

27
Nick Craver

La propriété scrollHeight de l'élément DOM peut également vous donner la hauteur dont vous avez besoin.

$(".expand").animate({
    height : $(".expand")[0].scrollHeight
},2000);

Un exemple de travail peut être trouvé sur http://jsfiddle.net/af3xy/4/

5
Torin Finnemann

Ce fil n'est pas le plus récent, mais voici une autre approche.

J'ai été confronté au même problème aujourd'hui et je n'ai pas pu le faire fonctionner correctement. Même avec la bonne hauteur calculée avec height: auto Appliqué, l'animation ne me donnerait pas les bons résultats. J'ai essayé de le mettre dans $(window).load au lieu de $(document).ready, ce qui a aidé un peu, mais a quand même coupé ma dernière ligne de texte.

Au lieu d'animer la hauteur elle-même, j'ai pu résoudre le problème en ajoutant et en supprimant une classe cachée à ma div de manière dynamique. Si vous utilisez jQuery-UI, Vous pouvez appliquer une durée à ces effets. Cela semble également fonctionner dans tous les navigateurs.

Voici un exemple de travail.

2
Jules