Tengo este código que trata de un panel que muestra y esconde contenido
¿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? Agradecería mucho si me respondieran con el código conveniente pues no tengo mucha idea de esto.

Gracias de antemano

<!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>

1 comentario

sandra_cabello

el 26.12.2018 a las 13:04

Hola salvadordb310, no me quedó muy claro que pedias pero realize algunas modificaciones en el código, espero que esto pueda ayudarte. Un saludo.

<!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 (e) { e.preventDefault(); $("#panel").stop().slideToggle("slow", function(){ if ($(this).css('display') === "none") 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.floor(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>

Responder
Me gusta

Entra o únete Gratis para comentar

Seguro que tienes mucho que decir, te estamos esperando.

Comenta en el foro

Únete Gratis y aprende con profesionales creativos como tú

Únete Gratis con tu email

Al hacer clic en "Únete Gratis" certifico que tengo 16 años o más y acepto las Condiciones de Uso, la Política de Privacidad, la Política de Cookies y recibir novedades y promociones.

Iniciado por

salvadordb310

Se unió en diciembre de 2018

Ronda, España

1 tema
0 comentarios

Otros temas en este foro

Mailchimp, programar

Buenas tardes, A ver si alguien me puede a ayudar... El Mailchimp siempre me había funcionado bi...

por annapalomo
- 0
- 2
Socio programador Javascript.

Busco un programador en Javascript 👩‍💻 👨‍💻 , pero sobretodo entusiasta de la tecnología 📱 con ga...

por falque_f7ee69b2-8986-4ecf-808c-67aec9d7a5d3, el 13.01.2020 a las 20:05
- 0
- 0
Firma mail html mac

Hola a todos, he creado una firma en html que consiste en una imagen con la información que al p...

por ivegas, el 05.05.2017 a las 14:51
- 0
- 0
Ayuda con formulario html

Actualmente estoy aprendiendo a programar, el detalle esta en que tengo un formulario en html, pe...

por cesariin0ne
- 0
- 3
Problema con la extensión de pantalla (monitor + tableta gráfica) - PROBLEMA RESUELTO

Hola, tengo una tableta gráfica Huion Kamvas GT191 y tengo un problema a la hora de extender las ...

por alexscrawls
- 65
- 43
Problemas con el cuentagotas. Illustrator CC 2018

Hola amigos. Estoy un poco desesperado, he peinado la red y no encuentro solución. En Illustrato...

por bandvela
- 13
- 28