Creando animacións de usuario específicas
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.
Mais información sobre os parámetros da función animate()
Código de exemplo dunha función específica que fai un escalado:
$('.animacion').each(function(){
$(this).animate(
{
width: $(this).width() * 2,
height: $(this).height() * 2
},
2000
);
});
Exemplo completo que emprega funcións específicas de usuario:
<!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>