如果鼠标进入徽标，请停止淡入淡出

Question

我有这个小提琴。

http://jsfiddle.net/LTSSx/15/

现在它在鼠标离开时淡出。但是当鼠标离开并再次进入徽标时，我想清除超时。但是当我清除超时时，该功能停止工作，因为在启动时没有计时器。请帮助我，谢谢。

$('.logo').mouseenter(function(){
    $('.bubble-container').fadeIn();
});

$('.logo').mouseleave(function(){
    setTimeout(function() {
         $('.bubble-container').fadeOut();
    },1000);
});

Answer 1

非常确定这会奏效。只需将超时置于全局变量中，因此clearTimeout可以访问它。

var fadeOutTimeout;

$('.logo').mouseenter(function(){
    clearTimeout(fadeOutTimeout);
    $('.bubble-container').fadeIn();
});

$('.logo').mouseleave(function(){
    fadeOutTimeout = setTimeout(function() {
         $('.bubble-container').fadeOut();
   },1000);
});

Answer 2

它工作的小提琴：http://jsfiddle.net/LTSSx/18/

var timer = '';
$('.logo').mouseenter(function(){
    clearTimeout(timer);
    $('.bubble-container').fadeIn();
});

$('.logo').mouseleave(function(){
    timer = setTimeout(function() {
         $('.bubble-container').fadeOut();
    },1000);
});