Comment puis-je animer une hauteur d'une div à partir d'une valeur dynamique jusqu'à sa valeur de hauteur dynamique?

Je veux utiliser l'effet de slideDown() pour la première div pour l'afficher, en partant de la hauteur générée dynamiquement de la dernière div à une hauteur générée dynamiquement par son contenu dedans?Comment puis-je animer une hauteur d'une div à partir d'une valeur dynamique jusqu'à sa valeur de hauteur dynamique?

Dans le code ci-dessous la partie avec le problème est .animate ({'height': '200px'}/.animate ({'height': '100px'}, les valeurs 200px et 100px doivent être générées dynamiquement.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html> 
<head> 
    <title>Slide Down</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <style type="text/css"> 
    div {background:#de9a44;width:80px; } 
    </style> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
</head> 
<body> 
    <div style="display: none"> 
    In pellentesque risus sit amet magna consectetur nec consequat eros ornare. 
    </div> 
    <div>Vivamus placerat eleifend rutrum</div> 
    Click! 
    <script type="text/javascript"> 
    $(document.body).click(function() { 
    if ($("div:first").is(":hidden")) { 
    var height = $("div:last").height(); 
    $("div:last").hide(); 
    $("div:first").height(height); 
    $("div:first").animate({'height':'200px'},"slow"); 
    } else { 
    var height = $("div:first").height(); 
    $("div:first").hide(); 
    $("div:last").height(height); 
    $("div:last").animate({'height':'100px'},"slow"); 
    } 
    }); 

    </script> 
</body> 
    </html>

Source

2010-06-24 AlqC

D'où devrait exactement venir la hauteur cible? –

Essayez quelque chose comme ceci:.

$("div:last").animate({'height':'auto'},"slow");

Source

2010-06-24 17:37:46 Mark

trouvé la réponse que je ne savais pas que vous pouvez obtenir les dimensions des éléments cachés, et la solution est venue naturellement ..

<script type="text/javascript"> 
     $(document.body).click(function() { 
      if ($("div:first").is(":hidden")) { 
       var hidden = $("div:first").height(); 
       var showing = $("div:last").height(); 
       $("div:last").hide(); 
       $("div:first").height(showing); 
       $("div:first").animate({'height':hidden},"slow"); 
      } else { 
       var hidden = $("div:last").height(); 
       var showing = $("div:first").height(); 
       $("div:first").hide(); 
       $("div:last").height(showing); 
       $("div:last").animate({'height':hidden},"slow"); 
      } 
     }); 
    </script>

Ne fonctionne pas avec 'height': 'auto'.

ps. Je suis AlqQ. Je suppose que je me suis enregistré il y a quelque temps et maintenant, quand je me connecte avec un OpenID, il me redirige vers ce vieux compte, ce qui me convient parfaitement.

Source

2010-06-24 18:04:01 Alqin

Comment puis-je animer une hauteur d'une div à partir d'une valeur dynamique jusqu'à sa valeur de hauteur dynamique?

Répondre

Questions connexes