https://manuais.iessanclemente.net/index.php?title=Amosar_e_ocultar_empregando_animaci%C3%B3ns&feed=atom&action=historyAmosar e ocultar empregando animacións - Historial de revisiones2024-03-28T08:38:44ZHistorial de revisiones de esta página en el wikiMediaWiki 1.36.2https://manuais.iessanclemente.net/index.php?title=Amosar_e_ocultar_empregando_animaci%C3%B3ns&diff=52508&oldid=prevVeiga: /* Deter unha animación */2015-01-26T22:07:03Z<p><span dir="auto"><span class="autocomment">Deter unha animación</span></span></p>
<p><b>Página nueva</b></p><div>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.<br />
<br />
As transicións graduais axúdannos a darnos conta do cambio que se está producindo.<br />
<br />
Para eso temos tres conxuntos de efectos:<br />
<br />
- Amosar e ocultar.<br />
- Fade in e Fade out.<br />
- Deslizar arriba e abaixo.<br />
<br />
=== Amosar e ocultar elementos gradualmente ===<br />
<br />
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.<br />
<br />
Vexamos as opcións de cada comando:<br />
<br />
'''- hide(velocidade, retorno)''': <br />
<br />
- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".<br />
<br />
- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.<br />
<br />
'''- show(velocidade, retorno)''': <br />
<br />
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'''.<br />
<br />
- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".<br />
<br />
- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.<br />
<br />
'''- toggle(velocidade, retorno)''': <br />
<br />
Realiza o show() dun elemento que esté oculto, ou hide() dun elemento visible.<br />
<br />
- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".<br />
<br />
- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.<br />
<br />
Exemplo da lista desplegable pero con efectos:<br />
<br />
<source lang="html4strict"><br />
<!DOCTYPE html><br />
<html lang="es"><br />
<head><br />
<meta charset="UTF-8"><br />
<title>Lista desplegable con Efectos</title><br />
<style><br />
fieldset {<br />
margin-bottom: 12px;<br />
border-color: #00457b;<br />
background-color: #CCFF66;<br />
}<br />
legend {<br />
border: 2px ridge #00457b;<br />
font-weight: bold;<br />
background-color: #00CCCC;<br />
color: white;<br />
padding: 2px 16px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<fieldset><br />
<legend>Lista desplegable</legend><br />
<ul><br />
<li>Elemento 1</li><br />
<li>Elemento 2</li><br />
<li> Elemento 3<br />
<ul><br />
<li>Elemento 3.1</li><br />
<li> Elemento 3.2<br />
<ul><br />
<li>Elemento 3.2.1</li><br />
<li>Elemento 3.2.2</li><br />
<li>Elemento 3.2.3</li><br />
</ul><br />
</li><br />
<li>Elemento 3.3</li><br />
</ul><br />
</li><br />
<li> Elemento 4<br />
<ul><br />
<li>Elemento 4.1</li><br />
<li> Elemento 4.2<br />
<ul><br />
<li>Elemento 4.2.1</li><br />
<li>Elemento 4.2.2</li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li>Elemento 5</li><br />
</ul><br />
</fieldset><br />
<br />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script><br />
<script><br />
$(function(){<br />
$('li')<br />
.css('pointer','default')<br />
.css('list-style-image','none');<br />
$('li:has(ul)')<br />
.click(function(event){<br />
if (this == event.target) {<br />
$(this).css('list-style-image',<br />
(!$(this).children().is(':hidden')) ?<br />
'url(http://www.dungeonpbem.net/Image/System/Plus.gif)' : 'url(http://img1.moneycontrol.com/images/revamp/minus.gif)');<br />
<br />
$(this).children().toggle('slow');<br />
}<br />
return false;<br />
}).css({cursor:'pointer',<br />
'list-style-image':'url(http://www.dungeonpbem.net/Image/System/Plus.gif)'})<br />
.children().hide();<br />
$('li:not(:has(ul))').css({<br />
cursor: 'default',<br />
'list-style-image':'none'<br />
});<br />
});<br />
</script><br />
</body><br />
</html><br />
</source><br />
<br />
=== '''Fade in, Fade out e Fade to''' ===<br />
<br />
'''- fadeIn(velocidade, retorno):'''<br />
<br />
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%.<br />
<br />
- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".<br />
<br />
- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada. <br />
<br />
<br />
<br />
'''- fadeOut(velocidade, retorno):'''<br />
<br />
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.<br />
Os elementos que xa están ocultos, non se verán afectados por este efecto.<br />
<br />
- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".<br />
<br />
- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada. <br />
<br />
<br />
<br />
'''- fadeTo(velocidade, opacidade, retorno):'''<br />
<br />
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.<br />
<br />
- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".<br />
<br />
- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.<br />
<br />
=== '''Deslizar arriba e abaixo''' ===<br />
<br />
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.<br />
<br />
Tamén temos o método '''slideToggle()''' que é o equivalente a '''toggle()''' pero sin efectos.<br />
<br />
<br />
'''- slideDown(velocidade, retorno):'''<br />
<br />
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.<br />
<br />
- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".<br />
<br />
- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.<br />
<br />
<br />
'''- slideUp(velocidade, retorno):'''<br />
<br />
Ocultará de forma gradual os elementos que estén visibles, decrementando o seu tamaño vertical. <br />
<br />
- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".<br />
<br />
- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.<br />
<br />
<br />
<br />
'''- slideToggle(velocidade, retorno):'''<br />
<br />
Realiza slideDown() ou slideUp() dependendo de si os elementos están ocultos ou visibles.<br />
<br />
- velocidade: especifica a duración do efecto: "slow", "normal" ou "fast".<br />
<br />
- retorno: podemos programar unha función de tal xeito que cando a animación remate dita función sexa chamada.<br />
<br />
=== '''Deter unha animación''' ===<br />
<br />
Pode darse o caso de que por algunha razón teñamos que deter unha animación que xa comezou.<br />
<br />
Para facer isto dispomos do método '''stop()'''<br />
<br />
<br />
--[[Usuario:Veiga|Veiga]] ([[Usuario discusión:Veiga|discusión]]) 23:07 26 ene 2015 (CET)</div>Veiga