如何向下拉元素(和子元素)添加悬停超时

Question

这是我迄今为止所拥有的：http://jsfiddle.net/Pr3fix/LTSSx/4/

$(function(){
var timer;
$('.logo').hover(function(){
    $('.bubble-container').stop(true, true).fadeIn({ duration: 600, queue: false }).css('display', 'none').slideDown(600);
}, 
function(){
    timer = setTimeout(function(){
        $('.bubble-container').stop(true, true).fadeOut({duration: 600, queue: false}).slideUp(600);
    }, 3000);
});
$('.bubble-container').hover(function(){
    clearTimeout(timer);
},
function(){
    $('.bubble-container').stop(true, true).fadeOut({ duration: 600, queue: false }).slideUp(600);
});

})；

现在，如果您将鼠标悬停在"徽标"链接上，一个语音气泡下拉/淡入将使用jQuery动画化到视图中。

如果你把鼠标悬停在"徽标"链接上，然后把鼠标从它移开，在语音气泡隐藏之前会有一个很好的延迟。你也可以将鼠标移到语音气泡中，当你悬停在气泡上时，气泡不会隐藏。但一旦你将鼠标移出语音气泡，它就会立即隐藏。

我的问题是：我如何才能让悬停在演讲泡沫内/外的行为相同？我不希望它立即关闭，而是需要几秒钟的时间，这样，如果用户不小心碰到了他们的鼠标，它就不会不断地打开和关闭。要做到这一点，我需要在现有代码中更改什么？有什么表现或一般提示吗？

Answer 1

只需使用.delay(2000)来延迟事件的执行。

http://jsfiddle.net/LTSSx/7/

$('.bubble-container').stop(true, true).delay(2000).fadeIn({ duration: 600, queue: false }).css('display', 'none').slideDown(600);