jQuery animate hauteur

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

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

Je veux montrer à tout juste 2 lignes de texte par défaut, j'ai donc mis de la hauteur de 30px et trop-plein Caché.

Quand je clique sur l'élément H2 je veux animer le texte de slideDown et si je clique sur un autre temps, il slideUp à la hauteur par défaut (30px).

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

EDIT:

J'ai aussi plus d'un "développer" et plus de "H2" et le texte est différent dans la div, de sorte que la hauteur n'est pas corrigé... je tiens à la diapositive pour la fonction "auto" ou de la hauteur de 100%.

Quelqu'un peut m'aider?
Merci!

InformationsquelleAutor Andrea Turri | 2011-01-05
  1. 27

    Vous pouvez stocker la hauteur juste avant amincissant vers le bas pour 30px au chargement de la page, par exemple:

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

    Puis dans votre click gestionnaire:

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

    De sorte que ce n'est obtenir le .hauteur() (exécuter cette document.ready) avant la overflow: hidden c'ensemble, et les stocke via $.de données(), puis dans le click gestionnaires (via .toggle() à l'autre), nous utilisons cette valeur (ou 30) tous les autres cliquez pour .animate() à.

    • et si j'ai plus d'une élargir et le texte est différent pour chacun, comment puis-je obtenir le RealHeight?
    • est stocké par élément, de sorte que cela fonctionne pour n'importe quel nombre de <h2> et <div> paires 🙂
    InformationsquelleAutor Nick Craver
  2. 5

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

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

    De travail exemple peut être trouvé à http://jsfiddle.net/af3xy/4/

    • pouvez-vous animez avec l'augmentation de la vitesse? comme laisser la chute de prendre de la vitesse?
    • Oui, qui est défini par "l'assouplissement" (troisième paramètre de la fonction animate. jQuery a quelques levées de construire en, plus en tant que partie de la bibliothèque d'interface utilisateur, ou vous pouvez écrire votre propre. En savoir plus: api.jquery.com/animate/#easing
    • merci, cela rend la vie vraiment facile 🙂
    InformationsquelleAutor Torin Finnemann
  3. 2

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

    J'ai eu affaire avec la même question aujourd'hui et ne pouvait pas l'obtenir pour fonctionner correctement. Même avec de la bonne hauteur calculée avec height: auto appliquée, l'animation me donnerait pas les résultats corrects. J'ai essayé de mettre dans $(window).load au lieu de $(document).ready, qui m'a aidé un peu, mais restent hors de ma dernière ligne de texte.

    Au lieu de l'animation de la hauteur de lui-même, j'ai été en mesure de résoudre le problème par l'ajout et la suppression d'un caché classe de mon div dynamiquement. Si vous utilisez jQuery-UI, vous pouvez appliquer un durée de ces effets. Cela semble fonctionner dans tous les navigateurs, trop.

    Voici un travail exampe.

    InformationsquelleAutor Jules