Quiero mostrar la (i) imagen como un botón y cuando alguien haga clic en él, quiero ocultar el botón y mostrar el Aviso: ¡gracias por su paciencia! texto, y después de 5 segundos quiero volver a mostrar el botón y ocultar el texto como estaba.
<button id="info" onClick="hideText()"><img src="//i.imgur.com/45PUhN3.png"/></button> <div class="info-hide">Notice: thanks for your patience!</div>Probé con este código, pero no funcionó:
<script type="text/javascript"> setTimeout(function hideText() { $("#hide").fadeOut(".info-hide"); }, 5000); </script>¡Gracias!
function hideText() { $("#hide").fadeIn() setTimeout(() => { $("#hide").fadeOut() }, 5000); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="info" onClick="hideText()"><img src="//i.imgur.com/45PUhN3.png"/></button> <div class="info-hide" id="hide" style="display: none;">Notice: thanks for your patience!</div>Prueba lo siguiente:
<button id="info" onClick="hideText()"><img src="//i.imgur.com/45PUhN3.png"/></button> <div class="info-hide" style="display:none">Notice: thanks for your patience!</div> <script> function hideText() { // hides text for 5 secs const btn = document.querySelector('#info'); const infoHide = document.querySelector('.info-hide'); infoHide.style.display = "block" btn.style.display = 'none' setTimeout(()=>{btn.style.display = 'block'; infoHide.style.display= "none"}, 5000) } </script>