非アクティブ時にマウスカーソルをフェードアウトする（jQueryで）

Question

マウスが一定の時間（この場合は5000ミリ秒）の間非アクティブになるとフェードアウトするクラスがfade-objectで、マウスがフェードインすると再び移動した。

これは私が使用しているコードです：

 var timer; 
     $(document).mousemove(function() { 
      if (timer) { 
       clearTimeout(timer); 
       timer = 0; 
      } 

      $('.fade-object').fadeIn(); 
      timer = setTimeout(function() { 
       $('.fade-object').fadeOut() 
      }, 5000) 
     }) 

どのように私はそれがとてもマウスカーソルが私のfade-objectのdivと同期して、同じようにしてフェードアウトするのですか？

Answer 1

cursor: noneをhtmlのCSSに設定し、fadeoutの直後に発生するmousemoveイベントが再表示されないようにします。

Demo

$(function() { 
    var timer; 
    var fadeInBuffer = false; 
    $(document).mousemove(function() { 
     if (!fadeInBuffer) { 
      if (timer) { 
       clearTimeout(timer); 
       timer = 0; 
      } 
      $('.fade-object').fadeIn(); 
      $('html').css({ 
       cursor: '' 
      }); 
     } else { 
      fadeInBuffer = false; 
     } 


     timer = setTimeout(function() { 
      $('.fade-object').fadeOut() 
      $('html').css({ 
       cursor: 'none' 
      }); 
      fadeInBuffer = true; 
     }, 5000) 
    }); 
}); 

Answer 2

cursor: noneをjQuery経由で遅延を適用します。フェードアウトさせることは可能だとは思わないでください。

このCSSプロパティの使用は、Firefox 3+、Safari 5+、Chrome 5+に限られます。 IEではサポートされていません（hereと記載されています）。

私は私のブラウザでは（Linux上のFirefox 19.0.2）が動作していないです、jsBinで例を入れている、あなたは私がそのようにお勧めすることはできませんとにかく

:)を可能な限り多くのブラウザでそれをテストマウスカーソルが操作システムのUIの一部であると考えると、UIの一部ではないユーザーから何かを隠すことは決して良い方法ではありません。