Efectos y animaciones usando Jquery

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>

 

Acerca del autor:

Mi nombre es Jorge Villalobos, soy Colombiano de nacimiento y resido en México desde 2005,actualmente soy el creador de codigoprogramacion.com Soy ingeniero en tecnologías de información y comunicaciones y trabajo de tiempo completo desarrollando aplicaciones web. En general me considero un tipo normal, me gusta salir, divertirme, y uno de mis hobbies es programar y hacer tutoriales para compartir conocimiento, me gusta la pizza, el ajedrez y tomar una que otra cerveza los fines de semana. Espero que este proyecto ayude a ayudar a los demás.

Twitter del autor:

Leave a Reply

Your email address will not be published. Required fields are marked *