带有延迟的JavaScript / jQuery鼠标悬停事件

Question

I have a code that allows me to show hidden divs after a little delay on mouseover, my problem now is that im not very good with CS, i have elements in that div with that code:

 $(document).ready(function() { var timer; var delay = 250; $("#content1").mouseover(function() { timer = setTimeout(function() { $("#content.left1").css("display", "block"); }, delay); }); $("#content1").mouseout(function() { $("#content.left1").css("display", "none"); clearTimeout(timer); }); }); 

 .txtmiddle { border: 1px solid rgba(215, 215, 215, 0.1); background-color: rgba(245, 245, 245, 0.7); margin-top: 5px; opacity: 0.6; filter: alpha(opacity=60); padding: 2%; border-radius: 15px; position: relative; overflow: auto; -webkit-animation: fadeIn 0.1s; animation: fadeIn 0.1s; } .txtmiddle:hover { border: 1px solid rgba(55, 55, 55, 0.2); background-color: rgba(255, 255, 255, 0.9); opacity: 1; filter: alpha(opacity=100); } #content { display: none; background: rgba(255, 255, 255, 0.9); padding: 15px; border-radius: 15px; overflow: hidden; position: relative; } #txtleft { width: 30%; float: left; margin-left: 4%; border-top: 1px solid rgba(0, 0, 0, 0.0); } 

  <div id="txtleft"><div id="content" class="left1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit a</div> </div> <div id="middlewrapper"><div class="txtmiddle" id="content1"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Nuvola_mimetypes_info.png/100px-Nuvola_mimetypes_info.png" id="midcontentleft"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Nuvola_mimetypes_info.png/100px-Nuvola_mimetypes_info.png" id="midcontentimgright" class="1"> </div> </div> 

cant get it to run here.... but its working fine my only problem is now that everytime i hover over elements (those images) in the div the hidden content is (re-)shown again (with that delay) (before i didnt had the delay so the hidden element wouldnt disapear and apear again and one couldnt notice the change...

Answer 1

为什么不简单地使用fadeIn('slow')和fadeOut('slow')代替

Answer 2

I would usually use jQuery hover() to achieve what you are looking for:

 $(document).ready(function () { var timeout; $("#content1").hover(function () { timeout = setTimeout(function () { $("#content.left1").css("display", "block"); }, 250); }, function () { clearTimeout(timeout); $("#content.left1").css("display", "none"); }); }); 

Demo here .

Answer 3

As correctly said by atinder fadeIn and fadeOut functions of jQuery will serve your need:

Try the below code:

jQuery(document).ready(function() {
var delay = 1000;//the delay interval
jQuery("#content1").mouseover(function() {     
  jQuery( "#content.left1" ).fadeIn(delay);
});
jQuery("#content1").mouseout(function() {    
   jQuery( "#content.left1" ).fadeOut(delay);
   });
});

Hope it helps..