jQuery鼠标超时 [英] JQuery mouseout timeout

问题描述

之前已经处理过类似的问题，但是我相信由于使用bind()函数，我的问题略有不同.无论如何...

Similar problems have been dealt with before but I believe mine's slightly different owing to the use of the bind() function. Anyhow...

$('.overlay').bind("mouseenter",function(){
  $(this).fadeTo('slow', 0);
}).bind("mouseleave",function(){                
  setTimeout(function() { 
    $(this).fadeTo('slow', 1);
  }, 2000);
});

我想淡出"mouseenter"上的叠加层，但只能在"mouseleave"之后的2000ms内淡出.

I want to fade out the overlay on "mouseenter", but only fade it back in 2000ms after "mouseleave".

我还有一个问题:.overlay div消失时，我需要能够单击它下面的内容，即，我需要div完全消失或向下移动z-index堆栈.但是，如果我尝试将其添加进去，脚本会认为鼠标已离开.overlay div，因此.overlay会变回原位.

I have an additional question: When the .overlay div fades out, I need to be able to click on what's beneath it i.e. I need the div to disappear completely or move down the z-index stack. However, if I try adding this in, the script thinks the mouse has left the .overlay div, so the .overlay fades back in.

出于相同的原因，我不能使用fadeOut()和fadeIn().

For the same reason I can't use fadeOut() and fadeIn().

推荐答案

当超时触发时，this不会是您所期望的.您可以创建一个这样的闭包:

When the timeout fires this won't be what you expect. You can create a closure like this:

            $('.overlay').bind("mouseenter",function(){
                    $(this).fadeTo('slow', 0);
                    }).bind("mouseleave",function(){
                    var $this = $(this);                               
                    setTimeout(function() { 
                            $this.fadeTo('slow', 1);
                            }, 2000);
            });

这篇关于jQuery鼠标超时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！