jQuery Girl
  1. jQuery Girl
  3. jQuery animer hauteur
Intereting Posts
Quoi qu’il en soit d’utiliser scrollTop mais conserver le hashtag? Ajout de données à jQuery-Flexigrid sans ajax-demande effectuer jquery .click () sur la page en utilisant le contenu d’iframe JQuery glisser / défilement / débordement jQuery ajax this.id undefined Rechercher une valeur dans le tableau json et append un autre tableau json au nœud parent de la valeur. Liens n’apparaissant pas dans Fancybox iframe sélectionnez l’enfant le plus profond de jQuery désactiver les dates passées sur datepicker Ajouter des données au graphique à courbes à l’aide de chart.js jQuery – Chargement du formulaire soumis dans la DIV de la page parente (?) Impossible de changer d’amorçage modal css. Fondu modal dans bootstrap auto add padding-left 15px. Déclaration de jQuery Valider les règles du plug-in – atsortingbut vs classe vs code Résoudre ce problème d’imagemap? jquery / ajax set en-tête de jeu de caractères

jQuery animer hauteur

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

Click me
 
Lot of text here....

Je veux montrer que 2 lignes du texte par défaut, donc je mets la hauteur à 30px et le débordement Caché.

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

J’essaie beaucoup de choses avec jQuery, mais ça ne marche pas.

MODIFIER:

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 … J’aimerais glisser à la hauteur “auto” ou à 100%.

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

Vous pouvez stocker la hauteur juste avant de la réduire à 30 px au chargement de la page, par exemple: 

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

Puis dans votre gestionnaire de 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, c’est obtenir le .height() (exécuter ceci dans document.ready ) avant le overflow: hidden il le définit, et le stocke via $.data() , puis dans les gestionnaires de click (via .toggle() pour alterner ), nous utilisons cette valeur (ou 30) tous les autres clics pour .animate() to.

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);

Des exemples de travail peuvent être trouvés à http://jsfiddle.net/af3xy/4/

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

J’ai traité le même problème aujourd’hui et je ne pouvais pas le faire fonctionner correctement. Même avec la hauteur correcte calculée avec height: auto appliqué, l’animation ne me donnerait pas les résultats corrects. J’ai essayé de le mettre dans $(window).load au lieu de $(document).ready , ce qui m’a aidé un peu, mais toujours 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 dynamicment une classe cachée dans ma div. 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.