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

我有一个代码，可以让我在鼠标悬停了一段时间后显示隐藏的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中的元素（这些图像）上时，都会（重新）显示隐藏的内容（有延迟）（在我之前没有延迟，所以隐藏的元素不会消失并再次出现，并且一个人无法注意到变化...

最佳答案

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

希望能帮助到你..