jQuery 偵測滑鼠捲動與停止滑鼠捲動觸發的效果

最近想嘗試寫一個頁面在捲動的時候,圖片也會有動畫的效果,馬上想到的是原本是靜態的,在頁面捲動的時候變成動畫,不捲動了就恢復成靜態的圖片,於是需要偵測滑鼠滾輪的開始跟結束的事件。

可是因為 browser 有偵測開始的事件,卻沒有偵測結束的事件,查了一下看到有人是使用偵測滑鼠事件後,隔一段時間再把事件給清掉,就可以達成我想要的效果。

  1. $(window).scroll(function(){   
  2.     $("#cat").addClass("walk");   
  3.     timer = setTimeout( refresh , 500 );   
  4. });   
  5. var refresh = function () {    
  6.     $("#cat").removeClass("walk");   
  7. };  

Demo

不過效果沒有很好,之後再看有沒有更好的方法。

留言