viernes, 18 de mayo de 2012

Generar transparencia con fadeTo jquery


Generar transparencia con fadeTo jquery

fadeTo() Nos ofrece la oportunidad de generar trasparencia a nuestro elementos.

fadeTo(): ofrece transparencia, tiene tres parámetros tiempo en el cual el efecto será llevado a cabo, grado de transparencia y callback para una vez se ha finalizado el efecto, ejemplo ... $("#caja").fadeTo(tiempo, grado de transparencia, callback);

Para verlo más claro haz click en el siguiente botón...

Bienvenidos al Manual Jquery


Código de ejemplo ... 

<!-- 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").click(function(){
$("#caja").fadeTo(4000, 0.3, function()
{
$("#caja").fadeTo(4000, 1);
});
});
});
</script>
</head>
<body>
<input type="button" id="boton" value="Empezar">
<div id="caja" rel="fadeTo" title="fadeTo">
Bienvenidos al Manual Jquery</div>
</body>
</html>




2 comentarios:

comoalacanzarlalibertadfinanciera dijo...

$(document).ready(function() {
$("button#button").click(function(){
$("#caja").fadeToggle(5000, 0.3, function(){
$("#caja").fadeToggle(5000, 1);
}
});

});

escribi esto y el resto es el mismo html y css pero no pasa nada me da error.

Manu dijo...

Creo que ess por la versión de jquery, la del ejemplo es la 1.7, prueba con la última.

Saludos.