Variantes para ver y ocultar elementos

JMiur

Por ahí se dice que las transiciones con CSS, a la larga, reemplazarán a los scripts pero, eso es una exageración ya que, como toda herramienta, sólo suma posibilidades en lugar de restarlas y eso es lo bueno; nos permite tener más opciones y no tener que atarnos a determinadas cosas.

Veamos los casos típicos de mostrar y ocultar elementos; inevitablemente, requerimos alguna clase de script porque con CSS no podemos interactuar con clicks del ratón. Una función elemental que hace esto podría ser así:

function SINO(cual) {
   var elElemento=document.getElementById(cual);
   if(elElemento.style.display == 'block') {
      elElemento.style.display = 'none';
   } else {
      elElemento.style.display = 'block';
   }
}

Que usaríamos de este modo, ya sea con un enlace o con cualquier otra etiqueta:

<div id="demo1" style="display:none;">El elemento que está oculto.</div>

<a href="javascript:void(0);" onclick="SINO('demo1')">Mostar / Ocultar</a>

Mostar / Ocultar

Lo que hace esa función es permutar el estado de la propiedad display; si no se ve la mostramos (display:block) y si está visible la ocultamos (display:none). Como ese DIV "oculto" no ocupa espacio, al estar arriba del botón, cuando se "ve", desplaza el contenido hacia abajo pero no hace falta usar esa propiedad, podemos usar otras como visibility en cuyo caso, el contenido no se verá pero el espacio que ocuparía si:

function SINO(cual) {
   var elElemento=document.getElementById(cual);
   if(elElemento.style.visibility == "visible") {
      elElemento.style.visibility = "hidden";
   } else {
      elElemento.style.visibility = "visible";
   }
}

El elemento que está oculto.

Mostar / Ocultar

O la propiedad opacity donde pasaría lo mismo que en el caso anterior, ese DIV ocupa espacio aunque su contenido no sea visible:

function SINO(cual) {
   var elElemento=document.getElementById(cual);
   if(elElemento.style.opacity == "1" || elElemento.style.filter == "alpha(opacity=100)") {
        elElemento.style.opacity = "0";
        elElemento.style.filter = "alpha(opacity=0)";
   } else {
        elElemento.style.opacity = "1";
        elElemento.style.filter = "alpha(opacity=100)";
   }
}

El elemento que está oculto.

Mostar / Ocultar

En JavaScript Fade Tutorial – Fading Elements In/Out nos muestran un script para mostrar y ocultar elementos con un efecto de fade que podemos aplicar a cualquier elemento que se nos ocurra.

<script>
var fadeEffect=function() {
  return{
    init:function(id, flag, target){
      this.elem = document.getElementById(id);
      clearInterval(this.elem.si);
      this.target = target ? target : flag ? 100 : 0;
      this.flag = flag || -1;
      this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
      this.si = setInterval(function(){fadeEffect.tween()}, 20);
    },
    tween:function() {
      if(this.alpha == this.target){
        clearInterval(this.si);
      } else {
        var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
        this.elem.style.opacity = value / 100;
        this.elem.style.filter = 'alpha(opacity=' + value + ')';
        this.alpha = value
      }
    }
  }
}();
</script>

<style>
  .divbotones {
    height:35px;
    margin:0 auto;
    width: 500px;
  }
  .elboton {
    background-color: #CCC;
    border: 1px solid #EEE;
    border-radius: 3px;
    color:#555;
    cursor:pointer;
    padding: 4px 0 5px;
    text-align:center;
    width:200px;
  }
  .elboton:hover {
    background-color: #D9D9D9;
    border: 1px solid #FFF;
    color: #333;
  }
  .sinodemos {
    background:#355C33;
    border:1px solid #548954;
    border-radius:3px;
    color:#79AF72;
    height:26px;
    margin-bottom:10px;
    padding:9px 10px 0;
    text-shadow:1px 1px #21341D;
  }
  #demoFADE {
    opacity:0;
    filter:alpha(opacity=0);
  }
</style>

<div id="demoFADE" class="sinodemos"> El elemento que está oculto. </div>

<div class="divbotones">
  <div class="elboton" onclick="fadeEffect.init('demoFADE', 1)" style="float:left">Fade In</div>
  <div class="elboton" onclick="fadeEffect.init('demoFADE',0)" style="float:right">Fade Out</div>
</div>

El elemento que está oculto.

Fade In

Fade Out

Es interesante ver la entrada de ese sitio porque se han tomado el trabajo de escribir una explicación muy detallada de lo que hace el código (está en inglés) y sin embargo, algunos comentarios dicen cosas tales como: "bah, usando jQuery.fadeIn() se consigue lo mismo". De alguna manera, esa clase de comentarios que pretenden ser "modernos" sólo muestran ignorancia porque, si bien la afirmación es cierta, parecería que cierto tipo de personas estan realmente convencidas del fin de la historia así que mejor quedarse quieto, no aprender, no experimentar, no jugar, total, ya todo está inventado. Y eso es falso y recontra-falso.

Por suerte, hay quienes no creen así: "las librerías son importantes y claro, nos ahorran tiempo pero también es importante tanto para principiantes como para personas con conocimientos medios, tener tutoriales que expliquen cómo funcionan las cosas".

Concuerdo con esa idea y agregaría que el uso de cualquier herramienta (las librerías son eso) siempre debe estar acompañado de una mínima dosis de entendimiento. Usar una librería para poner un efecto simple en un botón es, como mínimo, un desperdicio porque en última instancia, lo que hacen no es otra cosa que facilitarnos tareas pero de ninguna manera son códigos más simples; por el contrario, son mucho más sofisticados y requieren muchos más procesos.

No hay nada malo ni nada bueno en estas cosas ya que están fuera de cualquier ética, sólo son herramientas que usamos o no usamos. Ya sé, estamos en plena moda de jquerismo y habrá que soportar el temporal pero también habrá que recordar que nunca hay solo un método para conseguir un resultado; que siempre hay alternativas y que toda moda, decía mi abuela, es pasajera.

Por ejemplo, esta sería una forma de hacer algo similar a lo anterior con un script más rudimentario pero aprovechándose de la propiedad transition por lo que su resultado final estará limitado a todos los navegadores modernos a excepción de Internet Explorer:

function fadeEffectTRANS(id,valor) {
  var cual = document.getElementById(id);
  cual.style.opacity = valor;
  cual.style.filter = 'alpha(opacity=' + valor + ')';
}

El elemento que está oculto.

Fade In

Fade Out

Obviamente, nadie sugiere cambiar una cosa por otra ya que el script original es soportado por todos los navegadores pero, para quien quiera arriesgarse, bastaria modificar el CSS y que quedara así:

#demoFADE {
  opacity:0;
  filter:alpha(opacity=0);
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

Algo similar podemos hacer con el primer script, tambien allí basta que agreguemos la propiedad transition al CSS para que se anime el efecto aunque, en ese caso, siempre debemos hacerlo con propiedades que tengan valores progresivos; display y visibility no nos sirven ya que pasan de un estado a otro de manera inatantánea; así que lo más cómodo es usar opacity; y en este caso, aunque en IE seguirá funcionando igual aunque sin esa animación:

El elemento que está oculto.

Mostar / Ocultar