viernes, 18 de mayo de 2012

Efectos visuales con Jquery fadeIn y fadeOut

Efectos visuales con Jquery fadeIn y fadeOut

Jquery nos proveé de múltiples efectos visuales, en este tema vamos a ver los efectos que nos ofrecen tanto fadeIn como fadeOut...

fadeIn: aparecerá con degradado y tiene dos claúsulas, una el tiempo que tardará en aparecer, y la instrucción de código que queremos que se ejecute, tras su aparición.
fadeIn(tiempo, function(){ //Instrucciones...});

fadeOut: desaparecerá con degradado y tiene dos claúsulas, una el tiempo que tardará en desaparecer, y la instrucción de código que queremos que se ejecute, tras su desaparición.
fadeIn(tiempo, function(){ //Instrucciones...});

Para verlo más claro haz click sobre el botón Empezar...
Bienvenidos al Manual Jquery


El código es el siguiente...

<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$("#caja").css({
width: "200px", 
height: "15px", 
backgroundColor: "yellow", 
borderStyle: "solid", 
borderColor: "blue", 
borderWidth: "3px",
fontFamily: "Verdana",
padding: "20px",
fontSize: "12px",
textAlign: "center",
color: "blue"
});
$(":button#boton").toggle(function(){
$(":button#boton").val("Aparece");
$("#caja").fadeOut("slow");},
function(){
$(":button#boton").val("Desaparece");
$("#caja").fadeIn(2000);
});
});
</script>
</head>
<body>
<input type="button" id="boton" value="Empezar">
<div id="caja" rel="fadeIn y fadeOut" title="fadeIn y fadeOut">Bienvenidos a Jquery Manual</div>
</body>
</html>