尝试淡入淡出元素时，setTimeout不起作用

Question

I'm calling a tooltip and trying to hide it after 9 seconds , but it does not work for me.

What is happening here that the "tooltip" is only hidden after loading , but it does not respond the second time I click on "Touch Me" button.
The "Touch Me" button is #pop-regalo

What am I doing wrong in my script?
You can find a demo below:

 $(function() { $('#pop-regalo').hide(); setTimeout(function() { $('#pop-regalo').fadeIn('slow'); }, 1000); }); //-------------------- $(document).ready(function() { $("#pop-regalo").click(function() { $("#hola,.layer-2,.tooltip").show(); }); $("#hola").click(function() { $("#hola,.layer-2").hide(); }); }); // -------------------- $(function() { $('.tooltip'); setTimeout(function() { $('.tooltip').fadeOut('slow'); }, 9000); }); 

 html, body { left: 0; top: 0; margin: 0; padding: 0; font-family: Arial, sans-serif } .note { width: 50%; margin: 70px auto 0 } #pop-regalo { position: fixed; left: 15px; top: 15px; padding: 10px 15px; color: white; background: red; cursor: pointer } #hola { display: none; position: absolute; width: 200px; height: 200px; padding: 15px 15px 8px; text-align: center; font-size: 2em; line-height: 200px; background: #999; -webkit-animation: fadein 1s; animation: fadein .75s; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; text-align: center; border-radius: 5px; -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7); z-index: 9999 } @keyframes fadein { 0% { opacity: 0 } 50% { opacity: 0 } 75% { opacity: 0 } 100% { opacity: 1 } } @-webkit-keyframes fadein { 0% { opacity: 0 } 50% { opacity: 0 } 75% { opacity: 0 } 100% { opacity: 1 } } .layer-2 { display: none; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); -webkit-animation: fadein .2s; animation: fadein .2s; z-index: 999 } .tooltip { display: none; position: fixed; top: 140px; left: 100%; margin-left: -80px } .tooltip .tooltiptext { width: 120px; background: #000; color: #fff; text-align: center; border-radius: 6px; padding: 8px 12px; position: absolute; z-index: 1; top: -5px; right: 110%; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 30%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent #000 } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="pop-regalo">Touch Me <!--<img src="https://i.pinimg.com/originals/3b/4f/ff/3b4fff9dfb958a180863c56d7fcf6326.jpg">--> </div> <div class="note">What is happening here that the "tooltip" is only hidden after loading, but it does not respond the second time we click on the red button named Touch Me...?</div> <div id="hola">Close</div> <div class="tooltip"> <span class="tooltiptext">A gift for you</span> </div> <div class="layer-2"></div> 

Answer 1

You have to trigger the timeout at the moment you show the tooltip. In your original code, you're only triggering the timeout upon page load, so when if you click the red button for the first time after 9 seconds have already passed, the tooltip would not hide even on the first iteration.

You might also want to save a reference to the timeout instance to a variable and cancel this instance before triggering a new one, so that the tooltip will not be hidden too early when you close the overlay and click the button again while the tooltip is still showing.

 var tooltipTimeout; $(function(){ $('#pop-regalo').hide(); setTimeout(function(){ $('#pop-regalo').fadeIn('slow'); },1000); }); //-------------------- $(document).ready(function(){ $("#pop-regalo").click(function(){ $("#hola,.layer-2,.tooltip").show(); // clear any old timeout window.clearTimeout(tooltipTimeout); // you have to start the timeout after showing the tooltip tooltipTimeout = setTimeout(function(){ $('.tooltip').fadeOut('slow'); },9000); }); $("#hola").click(function(){ $("#hola,.layer-2").hide(); }); }); // -------------------- $(function(){ // the code in here is only called once at page load // $('.tooltip'); // <= this doesn't do anything // setTimeout(function(){ // $('.tooltip').fadeOut('slow'); // },9000); }); 

 html,body {left:0;top:0;margin:0;padding:0;font-family:Arial,sans-serif} .note {width:50%;margin:70px auto 0} #pop-regalo { position:fixed; left:15px; top:15px; padding:10px 15px; color:white; background:red; cursor:pointer } #hola { display:none; position:absolute; width:200px; height:200px; padding:15px 15px 8px; text-align:center; font-size:2em; line-height:200px; background:#999; -webkit-animation:fadein 1s; animation:fadein .75s; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; text-align:center; border-radius:5px; -webkit-box-shadow:0 3px 8px rgba(0,0,0,0.7); box-shadow:0 3px 8px rgba(0,0,0,0.7); z-index:9999 } @keyframes fadein{0%{opacity:0}50%{opacity:0}75%{opacity:0}100%{opacity:1}} @-webkit-keyframes fadein{0%{opacity:0}50%{opacity:0}75%{opacity:0}100%{opacity:1}} .layer-2 { display:none; position:absolute; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.5); -webkit-animation:fadein .2s; animation:fadein .2s; z-index:999 } .tooltip { display:none; position: fixed; top:140px; left:100%; margin-left:-80px } .tooltip .tooltiptext { width: 120px; background:#000; color: #fff; text-align: center; border-radius: 6px; padding: 8px 12px; position: absolute; z-index: 1; top: -5px; right: 110%; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 30%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent #000 } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="pop-regalo">Touch Me <!--<img src="https://i.pinimg.com/originals/3b/4f/ff/3b4fff9dfb958a180863c56d7fcf6326.jpg">--> </div> <div class="note">The tooltip will show upon button click and then hide after 9 seconds.</div> <div id="hola">Close</div> <div class="tooltip"> <span class="tooltiptext">A gift for you</span> </div> <div class="layer-2"></div>