Amosar e ocultar empregando animacións
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()