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();
    })

});

Fiddle

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);
    });
});

<强> DEMO

Answer 3

Heres a 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);
    });
});

希望有所帮助

Jquery在Mouseleave上停止fadeOut动画

3 个答案: