JQuery mouseout timeout

Question

Подобные проблемы уже рассматривались ранее, но я считаю, что у меня они немного другие из-за использования функции bind (). Так или иначе ...

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

Я хочу постепенно наложить пометку на "mouseenter", но только через 2000 мс после "mouseleave".

У меня есть дополнительный вопрос: когда div .overlay исчезает, мне нужно иметь возможность щелкнуть на том, что под ним, т.е. мне нужно, чтобы div полностью исчез или переместился вниз по стеку z-index. Однако, если я пытаюсь добавить это, сценарий думает, что мышь покинула div .overlay, поэтому .overlay снова возвращается.

По той же причине я не могу использовать fadeOut () и fadeIn ().

Answer 1

Когда истекает время ожидания, this не будет тем, что вы ожидаете. Вы можете создать замыкание следующим образом:

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