Veiga en 13:16 26 ene 2015

2015-01-26T13:16:11Z

Página nueva

O número de efectos programados na linguaxe jQuery non é demasiado extenso (para que a librería ocupe un mínimo de espazo nos documentos).

Pero non temos problema neste campo xa que hai infinidade de plugins para ampliar as capacidades de jQuery.

Na librería base inclúese un método denominado '''animate()''' que nos permitirá crear as nosas propias animacións no obxecto que desexemos. A súa sintaxe é a seguinte:

'''animate(propiedades,duracion,control,callback)'''

'''animate(propiedades,opcions)'''

En opcions podemos especificar varios parametros como duracion, control, funcion que se chamaría ó rematar, etc.

[http://docs.jquery.com/Effects/animate#paramsoptions Mais información sobre os parámetros da función animate()]

Código de exemplo dunha función específica que fai un escalado:
<source lang="javascript">
$('.animacion').each(function(){
$(this).animate(
{
width: $(this).width() * 2,
height: $(this).height() * 2
},
2000
);
});
</source>

'''Exemplo completo que emprega funcións específicas de usuario:'''

[[Imagen:Animacions-de-usuario.png]]

<source lang="html4strict">

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Efectos con jQuery</title>
</head>
<body>
<h2>Paxina de efectos especiais</h2>
<p> Emprega estas librerias: <br>
http://code.jquery.com/jquery-latest.js<br>
http://brandonaaron.net/docs/dimensions/scripts/jquery.dimensions.min.js </p>
<fieldset>
<legend>Efectos especiais.</legend>
<img src="http://www.xunta.es/imx/bandeiragalega-260-172.jpg" width="260" height="172"
id="testSubject"/>
<div>
<button type="button" id="scaleButton">Scalar</button>
<button type="button" id="dropButton">Tirar</button>
<button type="button" id="puffButton">Explosion</button>
</div>
</fieldset>

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://brandonaaron.net/docs/dimensions/scripts/jquery.dimensions.min.js"></script>
<script>
$(function(){

$('#scaleButton').click(function(){
$('#testSubject').each(function(){
$(this).animate(
{
width: $(this).width() * 2,
height: $(this).height() * 2
},
'slow'
);
});
});

$('#dropButton').click(function(){
$('#testSubject').each(function(){
$(this)
.css('position','relative')
.animate(
{
opacity: 'hide',
top: $(window).height() - $(this).height() -
$(this).position().top
},
'slow',
function(){ $(this).hide(); });
});
});

$('#puffButton').click(function(){
$('#testSubject').each(function(){
var position = $(this).position();
$(this)
.css({position:'absolute',top:position.top,
left:position.left})
.animate(
{
opacity: 'hide',
width: $(this).width() * 5,
height: $(this).height() * 5,
top: position.top - ($(this).height() * 5 / 2),
left: position.left - ($(this).width() * 5 / 2)
},
'normal');
});
});
});
</script>
</body>
</html>
</source>

--[[Usuario:Veiga|Veiga]] ([[Usuario discusión:Veiga|discusión]]) 14:15 26 ene 2015 (CET)

Creando animacións de usuario específicas - Historial de revisiones

Veiga en 13:16 26 ene 2015