Javascript：onmouseover不会触发多次

有一个名为onmouseover的函数，它可以将被模糊的元素动画化，然后，一旦鼠标移动到元素占据的区域之外，就会将元素动画化。该功能正常工作，但只能工作一次。所以如果我第二次鼠标悬停，功能不会被触发。我必须刷新页面才能使功能再次触发。任何援助将不胜感激。Javascript：onmouseover不会触发多次

HTML：

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

来源

2012-01-23 user1165534

我会说使用百分比而不是像素为您的动画是问题。 –

每次调用'slideDwon'时，为什么要将mousemove事件绑定到文档？他们只会继续堆叠起来，很快你的页面就会变得非常慢，因为每当鼠标移动时都会做很多事情。您还要从元素中解除绑定'onmouseover'事件。也许你打算从'document'中解开'mousemove'？然后是'$（document）.unbind（“mousemove”）' – Esailija

抱歉，$（item）.unbind（）不应该包含在内。我删除它 – user1165534

您从元素解除绑定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'); 
     } 
    }); 
}

来源

2012-01-23 18:46:05 Esailija

Javascript：onmouseover不会触发多次

回答

相关问题