Ejemplo slide Jquery
elemento de la pagina web, utilizando slide de jquery.
slide tiene las siguientes funciones, funciones que desplazan un elemento para abajo arriba o arriba|abajo:
slideDown()
slideUp()
slideToggle()
a continuación mostrare un ejemplo utilizando las funciones:
Slide Jquery
Como puedes ver en el ejemplo muestro e secciones con e botones
que ejecutan la funcion establecida funciones que utilizan el slide
siendo el primero una imagen que se oculta al presionar el boton
al reves el segundo boton muestra un formulario al presionar el boton
ya con el tercer boton muestra u oculta la informacion que contiene el
div al presionar el boton.
aqui el codigo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>appletenhtml slide jquery</title>
<script src="jquery-1.11.2.js"></script>
</head>
<body>
<article>
<section>
<img src="img.png" id="imagen"/>
<br><button id="boton1">Ocultar Imagen</button>
</section>
<hr />
<section>
<button id="boton2">Mostrar Formulario</button>
<form action="" id="formulario" style="display:none;">
<input type="text" name="" id="" />
<input type="button" value="boton" />
</form>
</section>
<hr />
<section>
<div id="dv" style="display:none;">
<h1>appletenhtml:</h1>
<p>java c++ python pascal</p>
<p>descargas extras</p>
<p>html php javascript asp </p>
<p>as3 android</p>
<p>zen code emmet jquery and more</p></div>
<button id="boton3">Mostrar/Ocultar informacion</button>
</section>
<hr />
</article>
<script>
$(document).ready(function(){
$("#boton1").click(function(){
//ocultando imagen
$("#imagen").slideUp();
});
$("#boton2").click(function(){
//mostrando formulario
$("#formulario").slideDown(2000);
});
$("#boton3").click(function(){
//ocultando mostrando div
$("#dv").slideToggle("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 slide jquery
Comentarios
Publicar un comentario