Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > jquery.hide() если мышь не двигается Х сек.

Автор: knyshow 10.7.2012, 23:58

Здравствуйте!

Натолкните на мысль пожалуйста, как средствами jquery реализовать следующее:

На странице есть некий небольшой элемент... для простоты - div.
Пока мышь двигается по странице - этот этот div отображается.
Когда мышь перестала двигаться, через несколько секунд div скрывается.

Если эти несколько секунд еще не истекли, а мышь снова начала свой нелегкий путь по странице - div остается видимым.

JS не входит в список моих талантов, сам не разберусь.
Первое, что приходит на ум:
1. глобальные переменные: currentXY и lastXY.
2. на событие mousemove для body в переменную currentXY запоминать координаты мыши и отображать div если он скрыт.
3. таймером с интервалом в те самые несколько секунд проверять:

- если div отображается и содержимое переменных currentXY и lastXY совпадают - скрыть div. координаты в lastXY обновить.
- если div отображается и содержимое переменных currentXY и lastXY различается - только обновить координаты lastXY.

Как бы, алгоритм выглядит рабочим, но уж больно напоминает костыль.

Посоветуйте более красивое решение пожалуйста.
Заранее спасибо.

Автор: knyshow 11.7.2012, 01:12

Код


$(document).ready
(
    function()
    {
        var $currXY = 0;
        var $lastXY = 9;

        $(document).mousemove
        (
            function(e)
            {
                currXY = e.pageX + "." + e.pageY;
            }
        );

        if ($('body.main').length)
        {
            hideTimer = setInterval
            (
                    function ()
                    {
                        if ( window.lastXY == window.currXY)
                        {
                            $('.zzz').fadeOut(1000);
                        }
                    },
                    10000
            );

            showTimer = setInterval
            (
                    function ()
                    {
                        if ( window.lastXY != window.currXY)
                        {
                            $('.zzz').fadeIn(250);

                            window.lastXY = window.currXY; // сохраняем новые координаты
                        }
                    },
                    500
            );
        }
    }
)

Автор: Aliance 11.7.2012, 09:49

Советую прочитать про механизмы throttle/debounce, например http://benalman.com/projects/jquery-throttle-debounce-plugin/.
Вещаете его на событие http://api.jquery.com/mousemove/ и profit!

Автор: knyshow 11.7.2012, 11:33

Сделал! Получилось просто и красиво.
Aliance, спасибо большое!

еще не разбирался, но судя по описанию - это самое то.