Question

我有一个jQuery，在鼠标移动时淡入/淡出div这样的对象：

var timer;
$(window).on('mousemove', function () {
    $("#my_div").fadeIn(1000)
    $('#my_div').addClass('show');
    try {
        clearTimeout(timer);
    } catch (e) {}
    timer = setTimeout(function () {    
        $('#my_div').fadeOut(1000,function() {   
            $(this).removeClass('show');
        });   
    }, 1960); 
});

问题是我的div标签上有输入表格和其他输入。

如何暂停此jQuery，直到鼠标悬停在my_div？

Answer 1

试试这个：

var timer;
$(window).on('mousemove', function () {
    if($('#my_div:hover').length !== 0) {
         clearTimeout(timer);
         return;
    }
    $("#my_div").fadeIn(1000)
    $('#my_div').addClass('show');
    try {
        clearTimeout(timer);
    } catch (e) {}
        timer = setTimeout(function () {    
        $('#my_div').fadeOut(1000,function() {   
        $(this).removeClass('show');
    });   
  }, 1960); 
});

这不会停止该事件，只有当您将鼠标移到my_div之上时，它才会取消它，如果您想要停止使用addEventListener事件，那么它很容易停止它

Answer 2

您可以检测event.target是my_div元素还是其中一个后代：

var timer, myDiv = $('#my_div');

$(document).on('mousemove', function(ev) {
    var _self = $(ev.target);

    clearTimeout(timer);

    if (_self.attr('id') === 'my_div' || _self.parents('#my_div').length) {
        return;
    }    

    if(!myDiv.hasClass('show')) {
       myDiv.fadeIn();
    }          

    timer = setTimeout(function() { 
        myDiv.fadeOut(1000, function() {
            myDiv.removeClass('show');
        });
    }, 1960);    
});

Demo

如何在鼠标悬停div上暂停jQuery？

2 个答案: