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

我有一个代码，允许我在鼠标悬停一小段时间后显示隐藏的div，现在我的问题是，我不是很好CS，我有该代码的div中的元素：延迟的JavaScript/jQuery鼠标悬停事件

$(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 { 
 
\t width: 30%; 
 
\t float: left; 
 
\t margin-left: 4%; 
 
\t 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隐藏的内容元素（那些图像）（再次显示（有那个延迟）（在我没有延迟之前，所以隐藏的元素不会消失并且再次出现，并且一个不可能注意变化...

来源

2015-07-21 UdSSR

如jQuery的的atinder淡入淡出和功能是否正确表示将满足您的需求：

试试下面的代码：

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

希望它可以帮助..

来源

2015-07-21 10:54:02 WisdmLabs

@UdSSR不知道为什么这个问题没有解决问题时被标记为接受的答案？ – Ash

它已被标记为接受的答案，因为它完全符合问题的要求......！ – WisdmLabs

这个问题指出，问题在于当您将鼠标悬停在div上时正在重新加载内容，而您的解决方案无法修复？ – Ash

为什么不干脆用fadeIn('slow')和fadeOut('slow')代替

来源

2015-07-21 10:35:24 atinder

我现在尝试'$（ “＃content1”）。mouseover（function（）{$（“＃content.left1”）。fadeIn（'slow'）}）; （“＃content1”）。mouseout（function（）{$（“＃content.left1”）。fadeOut（'slow'）}）;'但内容瞬间消失，淡出需要3秒钟。 .. – UdSSR

我通常会用jQuery hover()实现你在找什么：

$(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"); 
 
    }); 
 
});

演示here 。

来源

2015-07-21 10:49:22 Ash

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

回答

相关问题