Comment animer un div d'une hauteur fixe à sa hauteur automatique dans jQuery ?

Comment animer un élément à sa hauteur automatique dans jQuery

Lorsque vous essayez d'animer un élément

d'une hauteur fixe à sa hauteur automatique en utilisant jQuery, certains utilisateurs peuvent rencontrer des difficultés. Voici une solution à ce défi :

Le code fourni :

$("div:first").click(function(){
  $("#first").animate({
    height: "auto"
  }, 1000 );
});

rencontre des problèmes car les navigateurs n'animeront pas un changement de hauteur d'une valeur fixe à "auto".

Pour réaliser l'animation souhaitée, suivez ces étapes :

1. Enregistrez l'animation actuelle hauteur :

var curHeight = $('#first').height();

2. Réglez temporairement la hauteur sur « auto » :

$('#first').css('height', 'auto');

3. Obtenez l'auto hauteur :

var autoHeight = $('#first').height();

4. Restaurer la hauteur actuelle et animer à la hauteur automatique :

$('#first').height(curHeight).animate({height: autoHeight}, 1000);

Ceci La solution fonctionne car elle récupère d'abord la hauteur actuelle, permettant au navigateur de déterminer sa hauteur finale lorsqu'il est défini sur "auto".

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source：php.cn

Article précédent：CSS seul peut-il créer un tableau défilant compatible avec plusieurs navigateurs avec des en-têtes fixes ? Article suivant：N'ayez jamais peur d'apprendre ça.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

0

3

2497

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

0

11

2642

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

0

1

2232

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...

Depuis 2024-04-18 23:52:34

0

1

2097

Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel

Depuis 2024-04-16 10:10:18

0

0

2200

Rubriques connexes

Plus>

• Tendances récentes du marché de Ripple
• Quels sont les logiciels du serveur de fichiers ?
• Comment résoudre les problèmes lors de l'analyse des packages
• Que signifie Metaverse Concept Stock ?
• Échec de la routine d'initialisation de la bibliothèque de liens dynamiques
• mysqlmot de passe oublié
• Sur quelle touche appuyez-vous pour récupérer lorsque votre ordinateur tombe en panne ?
• La différence entre les notes de bas de page et les notes de fin