Question

有一个叫做onmouseover的函数，它动画了当时被鼠标移过的元素，一旦鼠标移动到元素占用的区域之外，就会激活元素的备份。该功能工作正常，但只能工作一次。因此，如果我第二次鼠标悬停，则不会触发该功能。我必须刷新页面才能让函数再次触发。任何帮助将不胜感激。

HTML：

<div class="frontDivcenter blueGradient shadow" id="front1" onmouseover="slideDown(this);">
        Hello
    </div>

使用Javascript：

function slideDown(item) {
    $(item).animate({
        top: '-100%'
    }, 250, 'easeInOutCubic');
    $(document).mousemove(function (e) {
        if (e.pageX < $(item).offset().left || e.pageX > ($(item).offset().left + $(item).width()) || e.pageY < $(item).offset().top || e.pageY > ($(item).offset().top + $(item).height())) {
            $(item).animate({
                top: '-200%'
            }, 250, 'easeInOutCubic');
        }
    });
};

Answer 1

您要解除元素中的mouseover，而不是mousemove

中的document

尝试：

function slideDown(item) {
    $item = $(item);
    $item.animate({
        top: '-100%'
    }, 250, 'easeInOutCubic');

    $(document).mousemove(function (e) {
        var offset = $item.offset(),
            width = $item.width(),
            height= $item.height();

        if (e.pageX < offset.left || e.pageX > ( offset.left + width) || e.pageY < offset.top || e.pageY > (offset.top + height )) {

            $(document).unbind("mousemove");

            $item.animate({
                top: '-200%'
            }, 250, 'easeInOutCubic' );
        }
    });
}

Javascript：onmouseover不会触发多次

1 个答案: