7

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

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

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

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

fade-objectdivと同期して、マウスカーソルが同じようにフェードインおよびフェードアウトするようにするにはどうすればよいですか？

4

2 に答える 2

8

cursor: noneのCSSで設定し、の直後に発生するイベントがアイテムを再表示しhtmlないようにします。mousemovefadeout

デモ

$(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)
    });
});
于 2013-03-20T19:05:05.727 に答える
7

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

このcssプロパティの使用は、Firefox 3以降、Safari 5以降、およびChrome5以降に制限されています。IEではサポートされていません（ここで説明されています）。

jsBinに例を示しましたが、私のブラウザでは機能していません（LinuxではFirefox 19.0.2）。できるだけ多くのブラウザでテストしてください:)

とにかく、そのような手法をお勧めすることはできません。マウスカーソルがオペレーティングシステムのUIの一部であると考える場合、UIの一部ではないものをユーザーから隠すことは決して良い考えではありません。

于 2013-03-20T19:02:24.443 に答える