Efectos Visuales Jquery show hide
show() y hide(), son funciones que bien o muestran el elemento(show) o lo ocultan(hide).
show: Muestra el elemento. ("#div").show(tiempo, callback);
hide: Oculta el elemento. ("#div").hide(tiempo, callback);
Haz click en el siguiente botón para ver lo que ocurre ...
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").click(function(){
$("#elemento").html("<b style='color: green;'>Elemento oculto</b>");
$("#caja").hide(1000, function()
{
$("#caja").show(1000);
$("#elemento").html("<b style='color: green;'>Elemento visible</b>");
});
});
});
</script>
</head>
<body>
<input type="button" id="boton" value="Empezar">
<div id="caja" rel="show hide" title="show hide">Bienvenidos al Manual Jquery</div>
<div id="elemento"></div>
</body>
</html>
No hay comentarios:
Publicar un comentario