jquery - Jquery在Mouseleave上停止淡出动画

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()绑定处理程序。

Answer 2

试试这个：

$(document).ready(function () {
    $('.this').hover(function () {
        $('#container').fadeIn(200);
    });
    $('.this').mouseleave(function (e) {
        setTimeout(function () {
            if ($('#container:hover').length != 1) $('#container').fadeOut(200);
        }, 1000);
    });
});

演示

Answer 3

这是一个 jsfiddle。看看吧，我认为这是你需要的。

$(document).ready(function() {
    $('a').hover(function() {
          $('.this').stop().fadeTo(200, 1, function(){
               $('.this').fadeTo(800, 0.1);
          });
    }, function() {
          $('.this').stop().fadeTo(200, 0.1);
    });
});

希望能帮助到你