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

Question

我有一个代码可以让我在鼠标悬停上稍微延迟后显示隐藏的 div，我现在的问题是我对 CS 不是很好，我在那个 div 中有元素和那个代码:

$(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>

不能让它在这里运行....但它工作正常我现在唯一的问题是每次我将鼠标悬停在 div 中的元素(那些图像)上隐藏的内容再次(重新)显示(延迟) (在我没有延迟之前，隐藏的元素不会消失并再次出现，而且人们不会注意到变化......

Answer 1

正如 atinder 所说，jQuery 的 fadeIn 和 fadeOut 函数将满足您的需要:

试试下面的代码:

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);
   });
});

希望对你有帮助..