ページを更新するまでマウスオーバースティックを作成するにはどうすればよいですか？

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

ここ

はデモです：.on()はjQueryの1.7であり、この場合には新しいものであることをhttp://jsfiddle.net/jasper/fWakf/4/

注意同じ.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"); 
    } 
}); 
});