VPF::jquery.hide() если мышь не двигается Х сек.

knyshow

Дата 10.7.2012, 23:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 34
Регистрация: 6.2.2010

Репутация: нет
Всего: 2

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

Натолкните на мысль пожалуйста, как средствами 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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 34
Регистрация: 6.2.2010

Репутация: нет
Всего: 2

Код


$(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 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

Советую прочитать про механизмы throttle/debounce, например здесь.
Вещаете его на событие mousemove и profit!

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

knyshow

Дата 11.7.2012, 11:33 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 34
Регистрация: 6.2.2010

Репутация: нет
Всего: 2

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

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

Это сообщение отредактировал(а) knyshow - 11.7.2012, 13:24

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »