Amosar e ocultar empregando animacións

De Manuais Informática - IES San Clemente.
Ir a la navegación Ir a la búsqueda

Cando amosamos ou ocultamos elementos, moitas veces prodúcese tan rápidamente o cambio, que non nos da tempo a darnos conta de que foi o que se ocultou ou o novo elemento que apareceu na pantalla.

As transicións graduais axúdannos a darnos conta do cambio que se está producindo.

Para eso temos tres conxuntos de efectos:

- Amosar e ocultar. - Fade in e Fade out. - Deslizar arriba e abaixo.

Amosar e ocultar elementos gradualmente

Os métodos show(), hide(), e toggle() son máis complexos do que vimos ata agora. Ata este momento vimos os comandos sen ningún tipo de parámetro adicional e o efecto que producen é inmediato. Pero cando lle pasamos parámetros estes efectos poden ter animacións polo que ese cambio produciráse nun determinado período de tempo.

Vexamos as opcións de cada comando:

- hide(velocidade, retorno):

- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".

- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.

- show(velocidade, retorno):

Provoca que calqueira elemento oculto sexa mostrado. Si se chama sen parámetros a operación execútase instantáneamente, axustando a propiedade display ó valor previo (inline ou block) sempre e cando o elemento fora ocultado mediante un efecto jQuery. Si o elemente non foi oculto mediante jQuery, a propiedade display será axustada a block.

- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".

- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.

- toggle(velocidade, retorno):

Realiza o show() dun elemento que esté oculto, ou hide() dun elemento visible.

- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".

- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.

Exemplo da lista desplegable pero con efectos:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Lista desplegable con Efectos</title>
  <style>
    fieldset {
      margin-bottom: 12px;
      border-color: #00457b;
      background-color: #CCFF66;
    }
    legend {
      border: 2px ridge #00457b;
      font-weight: bold;
      background-color: #00CCCC;
      color: white;
      padding: 2px 16px;
    }
  </style>
</head>
<body>
  <fieldset>
    <legend>Lista desplegable</legend>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li> Elemento 3
        <ul>
          <li>Elemento 3.1</li>
          <li> Elemento 3.2
            <ul>
              <li>Elemento 3.2.1</li>
              <li>Elemento 3.2.2</li>
              <li>Elemento 3.2.3</li>
            </ul>
          </li>
          <li>Elemento 3.3</li>
        </ul>
      </li>
      <li> Elemento 4
        <ul>
          <li>Elemento 4.1</li>
          <li> Elemento 4.2
            <ul>
              <li>Elemento 4.2.1</li>
              <li>Elemento 4.2.2</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Elemento 5</li>
    </ul>
  </fieldset>

  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script>
    $(function(){
      $('li')
      .css('pointer','default')
      .css('list-style-image','none');
      $('li:has(ul)')
      .click(function(event){
        if (this == event.target) {
          $(this).css('list-style-image',
            (!$(this).children().is(':hidden')) ?
            'url(http://www.dungeonpbem.net/Image/System/Plus.gif)' : 'url(http://img1.moneycontrol.com/images/revamp/minus.gif)');
          
          $(this).children().toggle('slow');
        }
        return false;
      }).css({cursor:'pointer',
      'list-style-image':'url(http://www.dungeonpbem.net/Image/System/Plus.gif)'})
      .children().hide();
      $('li:not(:has(ul))').css({
        cursor: 'default',
        'list-style-image':'none'
      });
    });
  </script>
</body>
</html>

Fade in, Fade out e Fade to

- fadeIn(velocidade, retorno):

Este efecto modifica a opacidade (opacity) do elemento ó que se lle aplica de tal xeito que si este elemento está oculto, irá amosándose pouco a pouco ata que chegue á opacidade orixinal do elemento ou ó 100%.

- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".

- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.


- fadeOut(velocidade, retorno):

Este efecto modifica a opacidade (opacity) do elemento ó que se lle aplica de tal xeito que modifica a súa opacidade ata chegar ó 0% e face-lo desaparecer. Os elementos que xa están ocultos, non se verán afectados por este efecto.

- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".

- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.


- fadeTo(velocidade, opacidade, retorno):

Este efecto modifica a opacidade (opacity) do elemento dende o valor actual ó valor indicado polo parámetro opacidade. Esta función non lembrará a opacidade orixinal do obxecto.

- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".

- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.

Deslizar arriba e abaixo

Outro conxunto de efectos que amosan ou ocultan elementos son slideDown() e slideUp(). Traballan de xeito semellante ós métodos hide() e show(), excepto que os elementos son amosados dende a zoa superior dos mesmos hacia abaixo ou ocultados dende a zoa inferior hacia arriba.

Tamén temos o método slideToggle() que é o equivalente a toggle() pero sin efectos.


- slideDown(velocidade, retorno):

Amosará de forma gradual os elementos que estén ocultos, incrementando o seu tamaño vertical. Calquer outro elemento que non esté oculto non se verá afectado por este efecto.

- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".

- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.


- slideUp(velocidade, retorno):

Ocultará de forma gradual os elementos que estén visibles, decrementando o seu tamaño vertical.

- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".

- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.


- slideToggle(velocidade, retorno):

Realiza slideDown() ou slideUp() dependendo de si os elementos están ocultos ou visibles.

- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".

- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.

Deter unha animación

Pode darse o caso de que por algunha razón teñamos que deter unha animación que xa comezou.

Para facer isto dispomos do método stop()


--Veiga (discusión) 23:07 26 ene 2015 (CET)