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

我有一个代码，允许我在鼠标上方稍有延迟后显示隐藏的div，我现在的问题是我对CS不是很好，我在该div中有一些元素和该代码：

$（文档）.ready（函数（）{
无功定时器；
无功延迟=250；
$（“#content1”）.mouseover（函数（）{
计时器=设置超时（函数（）{
$（“#content.left1”）.css（“显示”、“块”）；
}，延误）；
});
$（“#content1”）.mouseout（函数（）{
$（“#content.left1”）.css（“显示”、“无”）；
清除超时（计时器）；
});
});
.txtmidle{
边框：1px实心rgba（2152152150.1）；
背景色：rgba（2452452452450.7）；
边缘顶部：5px；
不透明度：0.6；
过滤器：α（不透明度=60）；
填充：2%；
边界半径：15px；
位置：相对位置；
溢出：自动；
-webkit动画：fadeIn 0.1s；
动画：fadeIn 0.1s；
}
.TXTMIDLE:悬停{
边框：1px实心rgba（55,55,55,0.2）；
背景色：rgba（255、255、255、0.9）；
不透明度：1；
过滤器：α（不透明度=100）；
}
#内容{
显示：无；
背景：rgba（255，255，255，0.9）；
填充：15px；
边界半径：15px；
溢出：隐藏；
位置：相对位置；
}
#TXTLEVT{
宽度：30%；
浮动：左；
左缘：4%；
边框顶部：1px实心rgba（0,0,0,0.0）；
}
Lorem ipsum door sit amet，consetetur sadipscing eliter，sed diam nonumy eirmod temporal invidund ut labour and dolore magna aliquyam erat，sed diam voluptua。在vero eos和accusam以及justo duo dolores和ea Reum。斯特特·克里塔·卡斯德·古伯格伦，没有大海
圣殿是圣殿。同侧阴唇
为什么不干脆用
fadeIn（'slow'）
和
fadeOut（'slow'）
来代替
为什么不干脆用
fadeIn（'slow'）
和
fadeOut（'slow'）
我通常会用它来实现你想要的：


$（文档）.ready（函数（）{
var超时；
$（“#content1”）.hover（函数（）{
超时=设置超时（函数（）{
$（“#content.left1”）.css（“显示”、“块”）；
}, 250);
},
函数（）{
clearTimeout（超时）；
$（“#content.left1”）.css（“显示”、“无”）；
});
});我通常会使用它来实现您想要的：


$（文档）.ready（函数（）{
var超时；
$（“#content1”）.hover（函数（）{
超时=设置超时（函数（）{
$（“#content.left1”）.css（“显示”、“块”）；
}, 250);
},
函数（）{
clearTimeout（超时）；
$（“#content.left1”）.css（“显示”、“无”）；
});
});正如atinder fadeIn所说，jQuery的淡出功能将满足您的需要：

请尝试以下代码：

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

希望对您有所帮助。
正如atinder fadeIn所说，jQuery的淡出功能将满足您的需要：

请尝试以下代码：

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

希望对您有所帮助。
我现在试试
$（“#content1”）.mouseover（函数（）{$（“#content.left1”）.fadeIn（'slow'）$（“#content1”）.mouseout（function（）{$（“#content.left1”）.fadeOut（'slow'））但内容会立即淡入，淡出大约需要3秒钟…我现在尝试
$（“#content1”）.mouseover（function（）{$（“#content.left1”）.fadeIn（'slow'）$（“#content1”）.mouseout（function（）{$（“#content.left1”）.fadeOut（'slow'））但内容会立即淡入，淡出大约需要3秒钟…@UdSSR不确定当它没有解决问题时为什么会将其标记为接受答案？它已标记为接受答案，因为它完全满足了问题的要求。。。！该问题指出，问题与您将鼠标悬停在div上时重新加载的内容有关，您的解决方案无法解决该问题？问题是解决“元素消失并再次出现，但您无法注意到更改”的问题。我的解决方案解决了这个问题：）我想你误解了这个问题。OP不希望在div内的图像上悬停时可以注意到过渡效果。@UdSSR不确定当它没有解决问题时为什么会将其标记为接受答案？它已标记为接受答案，因为它完全满足了问题的要求。。。！该问题指出，问题与您将鼠标悬停在div上时重新加载的内容有关，您的解决方案无法解决该问题？问题是解决“元素消失并再次出现，但您无法注意到更改”的问题。我的解决方案解决了这个问题：）我想你误解了这个问题。OP不希望在将鼠标悬停在div中的图像上时可以看到过渡效果。