Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Transición de un hidden con onclick

JavaScript - Transición de un hidden con onclick

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 10
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Transición de un hidden con onclick

Publicado por Cristian (6 intervenciones) el 04/05/2019 06:23:43
Buenos días, actualmente estoy intentando desarrollar un código que me permite tener un div con posición relativa y otro con posición absoluta encima de el, este segundo div está oculto a través de hidden y con un boton programado en js que al hacer onclick lo muestra y puedes volver a ocultarlo sin problemas. Me gustaría que al mostrarse, se mostrase una animación como de aparición, es decir de menos opaco 0,1 por ejemplo hasta 1 de opacidad (sin tener que poner el ratón encima solamente haciendo clic)

Este es el código que tengo ahora mismo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- Reglas -->
	<input id="breglas" type="button" value="Reglas" onClick="regla('reglas')" />
	<div id="reglas" class="hidden">
	Hola
	</div>
<!-- Scripts -->
<script>
function regla(id) {
	if (document.getElementById(id).style.display == 'block')
	{
		document.getElementById(id).style.display = 'none';
		document.getElementById('b'+id).value="Mostrar";
	}
	else
	{
		document.getElementById(id).style.display = 'block';
		document.getElementById('b'+id).value="Ocultar";
	}
}
</script>


Hoja de estilo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
#breglas{

	top:107%;
	position:absolute;
	left:48%;
}
input{
	display:block;
}
 
.hidden{
	display:none;
}
 
.responsiveContent {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.2%;
  margin-bottom: 20px;
}
.responsiveContent iframe {
  position: absolute;
  top: 6%;
  left: 10%;
  width: 80%;
  height: 75%;
}
#reglas{

	background:rgb(0,0,0,0.9);
	position:absolute;
	height:83%;
	top:7%;
	left:10%;
	width:80%;
}




He visto este código pero hace justo lo contrario y no sabría como poder usarlo para hacer justo lo contrario:
https://jsbin.com/iZUGaKI/edit?html,js,output
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Transición de un hidden con onclick

Publicado por ScriptShow (692 intervenciones) el 04/05/2019 14:15:17
Saludos Cristian,

veamos un ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script>
function regla(id) {
if (document.getElementById(id).className == "hide")
{
document.getElementById(id).className = "show";
document.getElementById('b'+id).value = "Mostrar";
}
else
{
document.getElementById(id).className = "hide";
document.getElementById('b'+id).value = "Ocultar";
}
}
</script>
 
<style>
#breglas{

top:107%;
left:48%;
display:block;
position:absolute;
}
 
#reglas{

top:7%;
left:10%;
width:80%;
height:83%;
position:absolute;
background:rgb(0,0,0);
-webkit-transiton:all 2s;
-moz-transition:all 2s;
transition:all 2s;
}
 
.hide{
color:#FFFFFF;

filter:alpha(opacity=0);
-khtml-opacity:0;
-moz-opacity:0;
opacity:0;
}
 
.show{
color:#FFFFFF;

filter:alpha(opacity=100);
-khtml-opacity:1;
-moz-opacity:1;
opacity:1;
}
</style>
 
<input id="breglas" type="button" value="Reglas" onClick="regla('reglas')" />
 
<div id="reglas" class="hide"><h2>Hola</h2></div>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar