Ejemplo Fade jquery
Con jquery podemos efectuar la desaparición de algun
elemento de la pagina web, utilizando fade de jquery.
fade tiene las siguientes funciones:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
funciones que podemos ejecutar automatico por metodo(slow,fast) o tiempo(1,2,300 etc)
a continuacion mostrare un ejemplo utilizando las funciones.
Fade Jquery
Como puedes ver en el ejemplo muestro un h1, img, p y div seguidos de un boton
el cual si lo presionan se ejecuta la funcion asignada a cada boton funcion que
el fade_ asignado a cada elemento.
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 fade de jquery.
fade tiene las siguientes funciones:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
funciones que podemos ejecutar automatico por metodo(slow,fast) o tiempo(1,2,300 etc)
a continuacion mostrare un ejemplo utilizando las funciones.
Fade Jquery
Como puedes ver en el ejemplo muestro un h1, img, p y div seguidos de un boton
el cual si lo presionan se ejecuta la funcion asignada a cada boton funcion que
el fade_ asignado a cada elemento.
aqui el codigo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>appletenhtml jade jquery</title>
<script src="jquery-1.11.2.js"></script>
</head>
<body>
<article>
<section>
<h1 id="H1" style="display:none;">|_____H1_____|</h1>
<button id="boton1">FadeIn h1</button>
</section>
<section>
<img src="img.png" alt="" id="imagen"/><br />
<button id="boton2">FadeOut img</button>
</section>
<section>
<p id="txt" style="display:none;">|_____txt_____|</p>
<button id="boton3">FadeToogle p</button>
</section>
<section>
<div id="dv" style="width:147px;height:45px;background-color:black;"></div><br />
<button id="boton4">FadeTo div</button>
</section>
</article>
<script>
$(document).ready(function(){
$("#boton1").click(function(){
//mostrando h1
$("#H1").fadeIn(500);
});
$("#boton2").click(function(){
//ocultando imagen lento
$("#imagen").fadeOut("slow");
});
$("#boton3").click(function(){
//mostrando txt
$("#txt").fadeToggle();
});
$("#boton4").click(function(){
//ocultando div rapido hasta el 0.09
$("#dv").fadeTo("fast",0.09);
});
});
</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 fade jquery
Comentarios
Publicar un comentario