Created
September 19, 2019 17:51
-
-
Save porfidev/1bd3a838be5214392c829c636204c181 to your computer and use it in GitHub Desktop.
Jquery Tutorial #1 Mostrar y Ocultar DIV con animación
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>Tutorial jQuery Remasterizado</title> | |
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> | |
<script> | |
var pagina = $(document); | |
pagina.on("ready", animar); | |
function animar() { | |
var x = $("#mostrar_elemento"); | |
x.on("click", mostrar); | |
var y = $("#ocultar_elemento"); | |
y.on("click", ocultar); | |
} | |
function mostrar() { | |
var x = $("div"); | |
x.show("slow"); | |
} | |
function ocultar() { | |
var x = $("div"); | |
x.hide("slow"); | |
} | |
</script> | |
<style> | |
.ocultado { | |
display: none; | |
background-color: #9c0; | |
border-color: #063; | |
border-style: dotted; | |
border: thin; | |
width: 200px; | |
height: 200px; | |
} | |
</style> | |
</head> | |
<body> | |
<input id="mostrar_elemento" type="button" value="Mostrar mensaje" /> | |
<input id="ocultar_elemento" type="button" value="Ocultar" /> | |
<div class="ocultado"> | |
Esta div se esta mostrando sin embargo puede ser cualquier elemento | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment