Ejemplo Animate Jquery
Con jquery podemos crear animaciones para algún
elemento de la pagina web, utilizando animate de jquery.
podiendo asignarle al elemento una o mas acciones
hacia uno o mas elementos
a continuacion mostrare un ejemplo utilizando animaciones:
Animate Jquery
Como puedes ver en el ejemplo muestro e secciones con e botones
que ejecutan la funcion establecida funciones que utilizan la animacion
siendo el primero un h1 que se mueve 250 px a la izquierda, el segundo
boton ejecuta las dos imagenes( img1 e img2 ) efectuandoles movimientos
de 320 px en direccion contraria, ya en el tercer boton se le asignan
tres animacones a un div como ser cambios en movimiento tamaño y opacidad.
aqui el codigo:
Ten en cuenta que para que funcione el codigo debes de tener el jquery
aqui el link: Jquery1.11.2.js
elemento de la pagina web, utilizando animate de jquery.
podiendo asignarle al elemento una o mas acciones
hacia uno o mas elementos
a continuacion mostrare un ejemplo utilizando animaciones:
Animate Jquery
Como puedes ver en el ejemplo muestro e secciones con e botones
que ejecutan la funcion establecida funciones que utilizan la animacion
siendo el primero un h1 que se mueve 250 px a la izquierda, el segundo
boton ejecuta las dos imagenes( img1 e img2 ) efectuandoles movimientos
de 320 px en direccion contraria, ya en el tercer boton se le asignan
tres animacones a un div como ser cambios en movimiento tamaño y opacidad.
aqui el codigo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>appletenhtml animate jquery</title>
<script src="jquery-1.11.2.js"></script>
</head>
<body>
<article>
<section>
<h1 id="H1" style="position:absolute;">Hola mundo</h1><br><br />
<button id="boton1">Mover</button>
</section>
<hr />
<section>
<br />
<br />
<br />
<img id="img1" src="img.png" style="position:absolute;" />
<img id="img2" src="img.png" style="position:absolute;"/>
<br><br><br /><br /><button id="boton2">Mover</button>
</section>
<hr /><br /><br /><br />
<section>
<div id="dv" style="width:147px;height:45px;background-color:black; position:absolute"></div>
<br />
<br />
<br />
<button id="boton3">Mover</button>
</section>
</article>
<script>
$(document).ready(function(){
$("#boton1").click(function(){
//moviendo h1
$("#H1").animate({left:'250px'});
});
$("#boton2").click(function(){
//moviendo 2 imagenes
$("#img1").animate({left:'320px'});
$("#img2").animate({right:'320px'});
});
$("#boton3").click(function(){
//asigandole animaciones a un div
$("#dv").animate({right:'250px', opacity:'0.11'},"slow");
$("#dv").animate({left:'250px', opacity:'0.3'},"fast");
$("#dv").animate({height:'300px',width:'320px', opacity:'0.8'},"slow");
});
});
</script>
</body>
</html>
Ten en cuenta que para que funcione el codigo debes de tener el jquery
aqui el link: Jquery1.11.2.js
Descargar ejemplo: example animate jquery
Comentarios
Publicar un comentario