Jquery在鼠标悬停后等待3秒钟

Question

我有这个jquery代码

$(".y_e").mouseover(function(){
        $(this).children(".Photopreview").show("fast");
        $(this).mouseleave(function(){
            $(this).children(".Photopreview").hide("fast");
        })
});

和这个html

     <div class="y_e">
       <div class="Photopreview">
         <img src="../uploads/a.jpg"/>
         <div class="Arrow_down" ></div>
      </div>
     </div>

如何在用户鼠标悬停y_e后等待3秒？

Answer 1

您可以使用setTimeout进行等待。

$('.y_e').mouseover(function() {
  setTimeout(function() {
    // The stuff you want to do when your three seconds are over.
  }, 3000)
});

Answer 2

尝试使用匿名函数实现setTimeout

$(".y_e").mouseover(function(){
    setTimeout(function() {
        $(this).children(".Photopreview").show("fast");
        $(this).mouseleave(function(){
            $(this).children(".Photopreview").hide("fast");
        })        
    }, 3000);
});

Answer 3

您可以使用“延迟”jquery方法，如下面的代码

{{1}}

注意：不要在其他事件侦听器中注册事件侦听器，因为这将为同一事件类型注册多个侦听器。