Jquery在Mouseleave上停止fadeOut动画

Question

有没有办法在jQuery中停止fadeOut()动画mouseleave？我希望脚本的工作方式如下:

• 1:当用户将鼠标悬停在文本上时,显示一个div
• 2:当用户鼠标移出文本时隐藏div,但如果用户将鼠标悬停在容器上,则div必须继续显示!

这就是我正在做的事情:

$(document).ready(function(){    
    $('.this').hover(function(){
        $('#container').fadeIn(200);
    }).mouseleave(function(){
        setTimeout(function () {
        $('#container').fadeOut(200);
    }, 1000);
    })

    $('#container').hover(function(){
        $('#container').stop().show();
    })

});

小提琴

Answer 1

像这样？http://jsfiddle.net/y36ta/6/

var $container = $('#container');

$('.this').on('mouseover', function(){
    $container.stop(true).fadeIn(200);
}).on('mouseleave', function(){
    $container.stop(true).delay(200).fadeOut(200);
})

$container.on('mouseenter', function(){
    $(this).stop(true).clearQueue().show();
}).on('mouseleave', function() {
    $(this).delay(200).fadeOut(200);
});

更新:用于.on()绑定处理程序.