Ocultar frase cuando el panel desaparezca
Publicado por Señor X (8 intervenciones) el 25/12/2018 12:49:28
Tengo este código:
¿Cómo puedo hacer que si el panel se está ocultando, que las frases no se muestren mientras que si el panel se está mostrando, estas aparezcan?
Y otra cosa, ¿Cómo puedo hacer que si la animación de mostrarse/ocultarse está en marcha y yo le hago click, esta se pare? Me explico, le das click y la animación de mostrarse está en marcha y yo quiero que si le das click otra vez, pare esa animación y comience la de ocultarse, mientras que ahora lo que hace si tú le das mientras se está mostrando, es esperar a terminar la animación, y acto seguido esconderse.
Gracias de antemano
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
<!DOCTYPE html>
<html>
<head>
<style>
#panel, #flip {
padding: 5px;text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}#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(){
$("#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>
<script>
</script>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
Y otra cosa, ¿Cómo puedo hacer que si la animación de mostrarse/ocultarse está en marcha y yo le hago click, esta se pare? Me explico, le das click y la animación de mostrarse está en marcha y yo quiero que si le das click otra vez, pare esa animación y comience la de ocultarse, mientras que ahora lo que hace si tú le das mientras se está mostrando, es esperar a terminar la animación, y acto seguido esconderse.
Gracias de antemano
Valora esta pregunta
0
