Javascript Girl
  1. Javascript Girl
  3. Faites de Div Expand Smoothly
Intereting Posts
Karma-Jasmine: Comment espionner correctement un Modal? La lecture automatique de youtube et du soundcloud s'insère l'une après l'autre Appel de la fonction javascript à partir de l'activité Android JQuery: exclure les enfants de .text () Le bloc de méthode JavaScript WebSocket.send? Ré-commander les colonnes dans une table HTML en utilisant jquery Définir un showRangeSelector pour deux DyGraph? Signature plus dans la chaîne de requête Comment créer une classe base abstraite en JavaScript qui ne peut pas être instanciée Comparaisons multiples dans une déclaration if utilisant l'opérateur OR logique Comment connecter Gmail dans ASP .NET MVC 5 Swing méthode semblable à HTML5's canvas.putImageData (arrayOfPixels, 0,0) ASP.net PageMethods retourne indéfini Pourquoi ne créez-je pas l'application Web complète dans les modèles HTML Javascript et Javascript? Laravel-5 variable de passage à JavaScript

Faites de Div Expand Smoothly

J'utilise Javascript pour développer un div, mais lorsque le contenu est étendu, il est très brusque et au mieux très peu attirant. Je me demandais s'il existait un moyen de faire en sorte que ce div se développe plus lentement et plus d'un élargissement visuel puis d'un BLAM. Maintenant, j'ai fini. 

<script language="javascript"> function toggle_profile() { var ele = document.getElementById("toggleProfile"); var text = document.getElementById("displayProfile"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "View Profile"; } else { ele.style.display = "block"; text.innerHTML = "Hide Profile"; } } </script> <a id="displayProfile" href="javascript:toggle_profile();">View Profile</a></p> <br /> <div id="toggleProfile" style="display: none">

Il n'y a vraiment aucun intérêt à réinventer la roue. Vous pouvez le faire très facilement avec le slidetoggle de Jquery. Voici la page: http://api.jquery.com/slideToggle/

L'astuce consiste à ajouter et supprimer des cours en Javascript … Et attacher une transition CSS3 comme ceci: 

 div { -webkit-transition: height .25s ease; -moz-transition: height .25s ease; transition: height .25s ease; }

Cela implique une transition que vous pouvez contrôler la vitesse de toutes vos divs. Bien sûr, vous pouvez choisir les éléments DOM à appliquer à vous-même.

Et puis les deux fonctions jquery que j'utiliserais sont 

 $("#object").addClass("removeThis"); //hide $("#object").removeClass("removeThis"); //show

Mais comme indiqué, vous ne pouvez pas utiliser jQuery! Alors voici! 

 document.getElementById("object").className = ""; document.getElementById("object").className = "removeThis";

Où "#object" est l'objet que vous ciblez et ".removeThis" est la classe que vous ajoutez et supprimez de l'attribut de classe dans la balise dom. Voici ce qu'il ressemble à css. 

 #object { height: 200px; /* ignoring other CSS */ } .removeThis { height: 0; }

En supposant que vous voulez qu'il glisse de haut en bas. Une autre astuce consiste à utiliser l'opacité, ou afficher: aucune et afficher: bloc. Mais jouez. J'espère que ça aide!

Edition depuis 2012: puisque vous utilisez JavaScript, vous demandez que le travail soit effectué sur le thread principal, vous pouvez utiliser le fil du compositeur en animant plutôt une transformation. C'est si vous pouvez comprendre comment vous éloigner de l'animation de la propriété de style haute.

Je pense que le meilleur truc est d'utiliser le overflow:hidden CSS overflow:hidden propriété overflow:hidden dans la division. Cela cachera le contenu qui est hors de la hauteur ou de la largeur du div. Ensuite, vous pouvez facilement augmenter et diminuer la hauteur de la division avec une transition CSS fluide.

Vous pouvez lire le didacticiel ici