| Autor |
Mensaje |
-
nuestrasxarlas
Semi-Experto
Ubicación: España
|
 11-10-2011, 19:01 (UTC)
Título del mensaje: [Jquery-HTML] efecto de ocultar y mostrar un elemento |
|
|
Código:
<script>
$(document).ready(function(){
$("#ocultar").click(function(event){
event.preventDefault();
$("#capaefectos").hide("slow");
});
$("#mostrar").click(function(event){
event.preventDefault();
$("#capaefectos").show(3000);
});
});
</script>
</head>
<body>
<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;">
Esto es una capa que nos servirá para hacer efectos!
<br>
<br>
Pongo este texto simplemente de prueba
</div>
<p>
<a href="#" id="ocultar">Ocultar la capa</a> |
<a href="#" id="mostrar">Mostrar la capa</a>
</p>
Ultima edición por nuestrasxarlas el Mie Oct 12, 2011 2:22 am; editado 3 veces
|
|
|
↑
|
|
 |
-
design-pwg
Semi-Experto
Ubicación: Argentina
|
11-10-2011, 19:09 (UTC)
Título del mensaje: |
|
|
Excelente aporte y Gracias por cumplir con las normas de la seccion.
Os dejo el codigo mas simple (sin codigos inútiles):
Lo que esta en rojo son codigos que no sirven ya que estos ya estan integrados en nuestras webs.
Cita: <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Efectos con jQuery</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#ocultar").click(function(event){
event.preventDefault();
$("#capaefectos").hide("slow");
});
$("#mostrar").click(function(event){
event.preventDefault();
$("#capaefectos").show(3000);
});
});
</script>
</head>
<body>
<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;">
Esto es una capa que nos servirá para hacer efectos!
<br>
<br>
Pongo este texto simplemente de prueba
</div>
<p>
<a href="#" id="ocultar">Ocultar la capa</a> |
<a href="#" id="mostrar">Mostrar la capa</a>
</p>
</body>
</html>
En conclusión el codigo nos quedaría de la siguiente manera:
Código: <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#ocultar").click(function(event){
event.preventDefault();
$("#capaefectos").hide("slow");
});
$("#mostrar").click(function(event){
event.preventDefault();
$("#capaefectos").show(3000);
});
});
</script>
<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;">
Esto es una capa que nos servirá para hacer efectos!
<br>
<br>
Pongo este texto simplemente de prueba
</div>
<p>
<a href="#" id="ocultar">Ocultar la capa</a> |
<a href="#" id="mostrar">Mostrar la capa</a>
</p>
Saludos!
Design-PWG.[/code] ______________ 
10 años ayudando a PWG.
 Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com |
|
|
↑
|
|
|
-
nuestrasxarlas
Semi-Experto
Ubicación: España
|
11-10-2011, 19:14 (UTC)
Título del mensaje: |
|
|
|
|
|
↑
|
|
|
-
supermarioworldsnes
Semi-Experto
|
11-10-2011, 19:24 (UTC)
Título del mensaje: |
|
|
Exelente efecto el xarlas 
Saludos! ______________ 
Super Mario la lleva, es lo mejor en Videojuegos, se los recomiendo
Ultima edición por supermarioworldsnes el Mar Oct 11, 2011 3:24 pm; editado 1 vez
|
|
|
↑
|
|
|
-
nuestrasxarlas
Semi-Experto
Ubicación: España
|
11-10-2011, 19:58 (UTC)
Título del mensaje: |
|
|
supermarioworldsnes escribió: Exelente efecto el xarlas
Saludos! |
|
|
↑
|
|
|
-
pwgsnippets
Nuevo
|
11-10-2011, 20:13 (UTC)
Título del mensaje: |
|
|
usando slideToggle te ahorras mucho code |
|
|
↑
|
|
|
-
guias-programas
Semi-Experto
Ubicación: Argentina - Bs.As
|
11-10-2011, 20:17 (UTC)
Título del mensaje: |
|
|
Buen code :D , es como un Mostrar y Contraer :D |
|
|
↑
|
|
|
-
nuestrasxarlas
Semi-Experto
Ubicación: España
|
11-10-2011, 20:17 (UTC)
Título del mensaje: |
|
|
Ultima edición por nuestrasxarlas el Mar Oct 11, 2011 4:18 pm; editado 1 vez
|
|
|
↑
|
|
|
-
buzzdungeon
Destacado
Ubicación: México
|
11-10-2011, 20:25 (UTC)
Título del mensaje: |
|
|
con toggle logras el mismo efecto que con show y hide, con slideTogle logras uno mejor ______________ /* Programador web freelance. */
/* twitter: @jfdelarosa */ |
|
|
↑
|
|
|
-
brianpwg
Semi-Experto
|
|
|
↑
|
|
|
-
nuestrasxarlas
Semi-Experto
Ubicación: España
|
|
|
↑
|
|
|
-
codigossolocodigos
Junior
|
12-10-2011, 16:39 (UTC)
Título del mensaje: |
|
|
buen aporte el xarlas______________ SnaKe
 |
|
|
↑
|
|
|
-
nuestrasxarlas
Semi-Experto
Ubicación: España
|
|
|
↑
|
|
|
-
radiovijaer
Semi-Experto
Ubicación: El Salvador
|
12-10-2011, 20:57 (UTC)
Título del mensaje: |
|
|
Qué bien!!!! esto es justamente lo que buscaba! gracias por compartirlo
 ______________ 
https://radiovijaer.es.tl/ |
|
|
↑
|
|
|
-
nuestrasxarlas
Semi-Experto
Ubicación: España
|
12-10-2011, 21:07 (UTC)
Título del mensaje: |
|
|
radiovijaer escribió: Qué bien!!!! esto es justamente lo que buscaba! gracias por compartirlo
gracias amiga Jazjaz por tu comentario,un saludo  ______________  Reglas del Foro
¿Dónde hacer mi tema/post? |
|
|
↑
|
|
|
|
Fuente del codigo: 
