在光标下的元素中淡入后触发悬停事件

Question

说明

我有一个在页面加载时隐藏的元素。片刻之后，它会淡入。如果用户的光标位于该元素加载的位置之上，我希望它仍然可以触发悬停事件（例如.mouseenter()和.mouseleave() ）无需用户进一步移动鼠标。

在下面提供的示例中，在页面加载时，将光标放在红色框内。 请注意，此红色框仅用于演示目的，以显示放置光标的位置。 几秒钟后，小猫将淡入视图。如果移动鼠标，则会触发缩放效果并将小猫的大小增加到150％。如果你不这样做，它将永远不会触发鼠标事件而且小猫不会长大。我该如何解决这个问题？

编辑 ：它似乎在Firefox 31中自动触发，但在Chrome 36或IE中不会触发。

小提琴：

http://jsfiddle.net/6xw8Z/1/

代码

setTimeout(function() {
    $('#kitty').fadeIn('slow');
}, 3000);

$('#kitty').mouseenter(function() {
    $(this).css({
        'transform': 'scale(1.5)',
        'transition': 'transform 500ms'
    });
}).mouseleave(function() {
    $(this).css({
        'transform': 'scale(1)',
        'transition': 'transform 500ms'
    });
});

Answer 1

您必须使用mousemove事件跟踪鼠标是否已经跟踪，然后在fadeIn完成后检查鼠标是否在元素范围内。

http://jsfiddle.net/6xw8Z/5/

<强>的jQuery

var mouseX = 0,
    mouseY = 0;

setTimeout(function() {
    $('#kitty').fadeIn('slow', function() {

        var thisOffset = $(this).offset(),
            thisWidth = $(this).outerWidth(),
            thisHeight = $(this).outerHeight();

        if(mouseX >= thisOffset.left && mouseX <= (thisOffset.left + thisWidth) && mouseY >= thisOffset.top && mouseY <= (thisOffset.top + thisHeight)) {

            $(this).trigger('mouseenter');

        }

        $('body').unbind('mousemove');

    });
}, 3000);

$('#kitty').mouseenter(function() {
    $(this).css({
        'transform': 'scale(1.5)',
        'transition': 'transform 500ms'
    });
}).mouseleave(function() {
    $(this).css({
        'transform': 'scale(1)',
        'transition': 'transform 500ms'
    });
});

$('body').mousemove(function(event) {

   mouseX = event.pageX;
   mouseY = event.pageY;

});

或者，如果您希望在mouseenter开始后立即触发fadeIn。

http://jsfiddle.net/6xw8Z/6/

<强>的jQuery

var mouseX = 0,
    mouseY = 0;

setTimeout(function() {
    $('#kitty').fadeIn('slow');
    var thisOffset = $('#kitty').offset(),
        thisWidth = $('#kitty').outerWidth(),
        thisHeight = $('#kitty').outerHeight();

    if(mouseX >= thisOffset.left && mouseX <= (thisOffset.left + thisWidth) && 
       mouseY >= thisOffset.top && mouseY <= (thisOffset.top + thisHeight)) {

        $('#kitty').trigger('mouseenter');

    }

    $('body').unbind('mousemove');
}, 3000);

$('#kitty').mouseenter(function() {
    $(this).css({
        'transform': 'scale(1.5)',
        'transition': 'transform 500ms'
    });
}).mouseleave(function() {
    $(this).css({
        'transform': 'scale(1)',
        'transition': 'transform 500ms'
    });
});

$('body').mousemove(function(event) {

   mouseX = event.pageX;
   mouseY = event.pageY;

});