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不會觸發多次

回答

相關問題