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

2173

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

2325

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

1957

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

1835

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

Depuis 2024-04-16 10:10:18

0

0

1885

Rubriques connexes

Plus>

• Que signifient les faces B et C ?
• le bios ne peut pas détecter le disque SSD
• Comment utiliser la bibliothèque Python
• Renommez le logiciel apk
• Solution à l'échec de la connexion entre wsus et le serveur Microsoft
• La fonction principale de l'unité arithmétique dans un micro-ordinateur est d'effectuer
• Comment résoudre le problème lorsque la température du processeur de l'ordinateur est trop élevée
• Java exporter Excel