animer un objet déjà ouvert
Bonjour,
je n'arrive pas à trouver une réponse à cette question:
j'ai un ou plusieurs Div conteant du texte, leur hauteur est inconnue à l'avance.
de façon arbitraire, je donne une hauteur à ce div ( height:100px avec overflow:hidden par exemple). A la suite du paragraphe je mets un paragraphe sur lequel j'écoute l'événement click.
je voudrais que quand on clique sur ce paragraphe le div avant lui s'anime pour prendre sa taille maximum. je n'y arrive pas , la seule chose que je peux faire c'est de lui faire prendre la valeur ( height:auto) et il s'ouvre d'un coup, sans animation.
voici le code
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| $('.expand-1').click(function() {
var $prevDiv = $(this).prev('div');
var hauteurDiv = $prevDiv.css("height");
var maValeur = "162px";
if (hauteurDiv > maValeur ) { // déjà ouvert
$(this).text("lire la suite ...");
$prevDiv.css("height", maValeur); // on réduit
} else if (hauteurDiv == maValeur) { // état initial ou état fermé
$(this).text("replier ...");
$prevDiv.css("height","auto"); // on ouvre le div au maximum
}
}); |
j'ai l'impression qu'on ne peut pas animer height avec la valeur auto et qu'il faut donner une valeur chiffrée.
Quelqu'un connaît-il une ruse pour contourner cela?
Merci
