如何製作鼠標懸停直到頁面刷新？

Question

我想在延遲後處理一個mouseover事件，然後在頁面刷新之前處於非活動狀態。

這是我的代碼至今：

$(function() { 
    $("#page-flip").mouseover(function() { 
     $(".box").toggleClass("box-change"); 
     $(".films").toggleClass("films-change"); 
     $(".synopsis").toggleClass("synopsis-change"); 
    }); 
}); 

如何將時間延遲添加到這一點，不是讓無效後，它被完全觸發一次？謝謝:)

Answer 1

您可以使用.one()有一個事件處理程序，只觸發一次：

$(function() { 
    //bind a mouseover event handler that will fire only once 
    $("#page-flip").one('mouseover', function() { 

     //set a timeout so the code runs after half a second 
     setTimeout(function() { 

      //run your code here 
      $(".box").toggleClass("box-change"); 
      $(".films").toggleClass("films-change"); 
      $(".synopsis").toggleClass("synopsis-change"); 
     }, 500); 
    }); 
}); 

這裏是一個演示：http://jsfiddle.net/jasper/fWakf/3/

文檔：http://api.jquery.com/one

您也可以使用.off() ：

$(function() { 
    $("#page-flip").on('mouseover', function() { 

     //remove this event handler so it doesn't fire in the future 
     $(this).off('mouseover'); 
     setTimeout(function() { 
      $(".box").toggleClass("box-change"); 
      $(".films").toggleClass("films-change"); 
      $(".synopsis").toggleClass("synopsis-change"); 
     }, 500); 
    }); 
}); 

這裏是一個演示：http://jsfiddle.net/jasper/fWakf/4/

注意.on() jQuery的1.7，在這種情況下，新的情況是相同的.bind()。 .off()也是新的，所以如果您使用的版本大於1.7和.bind()，請使用.unbind()。

Answer 2

編輯這個答案是更差比Jasper's。但它使用的模式不需要jQuery，所以我將它放下。

---

那麼，你可以去簡單和使用一個全局變量，或複雜，並完全刪除事件。

簡單的一個看起來像這樣。

var __GlobalEventFired = false; 
$(function() { 
$("#page-flip").mouseover(function() { 
    if(!__GlobalEventFired) 
    { 
     __GlobalEventFired = true; 
     $(".box").toggleClass("box-change"); 
     $(".films").toggleClass("films-change"); 
     $(".synopsis").toggleClass("synopsis-change"); 
    } 
}); 
});