JavaScript - Cómo puedo hacer que el texto del panel desaparezca cuando este se esté escondiendo

 
Vista:

Cómo puedo hacer que el texto del panel desaparezca cuando este se esté escondiendo

Publicado por Sañor V (4 intervenciones) el 26/12/2018 21:16:49
¿Cómo puedo hacer que el texto del panel desaparezca cuando este se esté escondiendo y que el texto aparezca cuando el panel se esté mostrando?

Muchas Gracias


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
<!DOCTYPE html>
 
<html>
<head>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
#panel {
padding: 50px;
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(e){
e.preventDefault();
$("#panel").stop();
$("#panel").slideToggle("slow");
mostrarFrases();
});
mostrarFrases();
});
</script>
<script>
var Frases=new Array()
Frases[0] = "Si en los inicios no puedes alimentar a tu equipo con 2 pizzas, es que es demasiado grande – Jeff Bezos de Amazon.";
Frases[1] = "El valor de una idea radica en el uso de la misma – Thomas Edison.";
Frases[2] = "El trabajo va a ocupar gran parte de tu vida. La única forma de estar realmente satisfecho es hacer aquello que crees que es un buen trabajo, y la única forma de hacer un gran trabajo es amar aquello que haces – Steve Jobs de Apple.";
Frases[3] = "Tus clientes más insatisfechos deben ser tu mayor fuente de aprendizaje – Bill Gates";
Frases[4] = "Una visión de una idea sin la capacidad de ejecución es únicamente una alucinación – Steve Case de AOL.";
var Q = Frases.length;
 
function mostrarFrases() {
var numAleatorio=Math.round(Math.random()*(Q-1));
document.getElementById("panel").innerHTML=Frases[numAleatorio];
}
</script>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
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

Cómo puedo hacer que el texto del panel desaparezca cuando este se esté escondiendo

Publicado por ScriptShow (692 intervenciones) el 27/12/2018 02:42:10
Una versión con efecto Fade...

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
56
57
58
<!DOCTYPE html>
 
<html>
<head>
<style>
#panel, #flip {
padding: 5px;
cursor: pointer;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
#panel {
padding: 50px;
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(e){
e.preventDefault();
$("#panel").stop();
$("#panel").fadeToggle("slow");
});
$("#panel").click(function(e){
e.preventDefault();
$("#panel").stop();
mostrarFrases();
});
mostrarFrases();
});
</script>
<script>
var Frases=new Array()
Frases[0] = "Si en los inicios no puedes alimentar a tu equipo con 2 pizzas, es que es demasiado grande – Jeff Bezos de Amazon.";
Frases[1] = "El valor de una idea radica en el uso de la misma – Thomas Edison.";
Frases[2] = "El trabajo va a ocupar gran parte de tu vida. La única forma de estar realmente satisfecho es hacer aquello que crees que es un buen trabajo, y la única forma de hacer un gran trabajo es amar aquello que haces – Steve Jobs de Apple.";
Frases[3] = "Tus clientes más insatisfechos deben ser tu mayor fuente de aprendizaje – Bill Gates";
Frases[4] = "Una visión de una idea sin la capacidad de ejecución es únicamente una alucinación – Steve Case de AOL.";
var Q = Frases.length;
 
function mostrarFrases() {
var numAleatorio=Math.round(Math.random()*(Q-1));
document.getElementById("panel").innerHTML=Frases[numAleatorio];
}
</script>
</head>
<body>
<div id="flip">Click to fade in / out the panel</div>
<div id="panel">Hello world!</div>
</body>
</html>

Espero sea útil.

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil
Val: 10
Ha disminuido su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cómo puedo hacer que el texto del panel desaparezca cuando este se esté escondiendo

Publicado por Sañor X (8 intervenciones) el 27/12/2018 09:47:59
Muchísimas gracias por su respuesta
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar