Aqui dejo este codigo para que puedan practicar algunas animaciones basicas con Jquery para sus paginas web.
Recuerden que Jquery no es mas que javascript, no es nada complicado ni de otro mundo:
Este es el video donde explico como usar este codigo y debajo el codigo fuente:
Introduzcan el siguiente codigo en un archivo con extensión ,html y abranlo en su navegador web preferido
Codigo fuente para practicar:
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
#caja
{
background-color: gray;
width: 200px;
height: 150px;
opacity:1;
float:left;
}
p
{
color:black;
padding: 10px;
font-size: 1.2em;
}
</style>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”type=”text/javascript”></script>
<script type =”text/javascript”>
function onload(){}
function animar() {
$(‘#caja’).animate({width:’400px’,height:’300px’},1500);
}
function desaparece()
{
$(‘#caja’).fadeOut(1500);
}
function desplegar()
{
$(‘#caja’).slideDown(1000);
}
function slide()
{
$(‘#caja’).slideUp(1000);
}
function reset()
{
$(‘#caja’).animate({
width: ‘200px’,
height: ‘150px’,
opacity:1
},2000);
}
</script>
</head>
<body>
<input type=”button” value=”Aparecer” onclick=”$(‘#caja’).fadeIn(1000);”/>
<input type=”button” onclick=”animar();” value=”Agrandar”/>
<input type=”button” onclick=”slide();” value=”Recoger”/>
<input type=”button” onclick=”desplegar();” value=”Desplegar”/>
<input type=”button” onclick=”reset();” value=”reset”/>
<br/>
<div id=”caja” onclick=”desaparece()”>
<p>Dame click!</p>
</div>
</body>
</html>
