Autor: Manuel Jesús Dávila González
Pais: España
TWITTER LINKEDIN


Puedes enviar tus consultas, propuestas, o dudas a la siguiente dirección de email ... click aquí

Saludos.

En este apartado podrás encontrar utilidades y herramientas que pueden servir de ayuda a la hora de desarrollar una aplicación web ...

A continuación un completo tutorial de Javascript sintaxis del lenguaje, funciones, arrays, condicionales, operadores, objetos y ejemplos.


Guía PHP









Buscar en el Blog:

Cargando...

viernes, 18 de mayo de 2012



Efectos Visuales Jquery slideDown y slideUp


Efectos Visuales Jquery slideDown y slideUp

slideDown y slideUp proporcionan un efecto similar al de una persiana, slideDown como una persiana que se cierra y slideUp como una persiana que se abre.

slideDown: Se desliza hacia abajo, dando la apariencia de una persina que se cierra, tiene dos parámetro, uno el tiempo que tardará el efecto y el otro(opcional), que sucederá una vez terminada la ejecución del efecto.
$("#caja").slideDown(tiempo, callback);

slideUp: Se desliza hacia arriba, dando la apariencia de una persina que se abre, tiene dos parámetro, uno el tiempo que tardará el efecto y el otro(opcional), que sucederá una vez terminada la ejecución del efecto.
$("#caja").slideUp(tiempo, callback);

Haz click en el siguiente botón para ver su efecto visual ...
Bienvenidos a Jquery Manual


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




Publicar un comentario: