jquery anime en min-height ou auto

Question

J'ai quelques trucs jquery ici pour animer un calque en cliquant. Le problème est parfois que le contenu peut dépasser la hauteur allouée dans le réglage de la hauteur. Y a-t-il un moyen de modifier ceci pour animer le calque à une hauteur minimum ou automatique au lieu d'un montant px?

$(function() { 
    $(".showcart").click(function(){ 
     $("#cart").animate({ height: "250px" }).animate({ height: "200px" }, "fast"); 
    }); 
    $(".hidecart").click(function(){ 
     $("#cart").animate({ height: "250px" }).animate({ height: "0px"}, "fast"); 
    }); 
}); 

Answer 1

Malheureusement non, vous ne pouvez pas dire juste pour animer ce qui va tenir. Pour ce faire, vous devez déjà connaître la bonne taille ou avoir un moyen de le calculer. Si tout cela se produit au sein d'une seule fonction ou d'un seul plugin, vous pouvez envisager de stocker la valeur de $(this).height() dans une variable quelque part avant de la développer, vous pourrez donc la replacer là où elle était auparavant. être.

Sinon, une possibilité pourrait être de placer un div à l'intérieur de celui que vous avez l'intention de faire croître/réduire et d'utiliser get $('> div', $(this)).height() pour obtenir la hauteur de votre div qui est à l'intérieur, quelle que soit la hauteur désordre avec la taille de la div extérieure.

Answer 2

Ceci est un peu difficile, car cela dépend beaucoup de la structure de votre page. Si vous pouvez définir la taille minimale css ou obtenir la hauteur d'un autre élément comme point de référence, vous pouvez animer à cette taille, ce qui rend les choses un peu plus dynamiques. Il n'y a malheureusement pas de méthode de redimensionnement automatique dans jQuery.

$(this).css("min-height"); //Gets min-height CSS property 

// or.. 

$(this).height(); //Gets element height 

Espérons que ça aide.

Answer 3

Je trouve que vous pouvez le faire simplement:

$("#cart").animate({ 'min-height': "250px" }, 'fast'); 

Citations sont l'élément clé ici.