Jquery наведите курсор мыши с помощью setTimeout - PullRequest
Новая
       59

Jquery наведите курсор мыши с помощью setTimeout

1 голос
/ 08 августа 2011

У меня есть горизонтальное меню навигации, и я хочу показать всплывающую подсказку, когда мышь пользователя удерживается на кнопке в течение 1 секунды. Или, другими словами, я хочу, чтобы была задержка, когда появится подсказка. Подсказка должна исчезнуть сразу, когда пользователь уберет мышь. Панель инструментов Stumbleupon - пример того, как я хочу, чтобы это функционировало.

JavaScript: 

$("a.btn").hover(
    function() {
        var tip = $(this).parent().children(".tip-wrapper");
        setTimeout(function{
            tip.show();
        }, 1000)
    },
    function {
        var tip = $(this).parent().children(".tip-wrapper");
        tip.hide();
    }
);

HTML: 

<th title="">   
    <a href="#" class="btn">
        <span class="person">Firstname Lastname</span>
    </a>

    <div class="tip-wrapper">
        <div class="tip-border">
            <div class="tip">
               tool tips go here
            </div>
        </div>
    </div>  
</th>

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

Ответы [ 3 ]

0 голосов
/ 08 августа 2011

у вас есть некоторые синтаксические ошибки: function { должно быть function() { (то же самое относится к setTimeout(function{ => setTimeout(function(){);
Я предлагаю использовать переменную, которая относится к вашей функции времени ожидания. Таким образом, вы можете остановить появление всплывающей подсказки, если пользователь не наведет курсор на элемент хотя бы на одну секунду. : 

var timeout;
$("a.btn").hover(
    function() {
        var tip = $(this).siblings(".tip-wrapper");
        timeout = setTimeout(function(){
            tip.show();
        }, 1000);
    },
    function() {
        // prevent the tooltip from appearing
        clearTimeout(timeout);
        var tip = $(this).siblings(".tip-wrapper");
        tip.hide();
    }
);

Кроме того, вы должны спрятать всплывающие подсказки в начале. - живой рабочий образец.

Пока вы уже используете jquery в своем проекте, я предлагаю вам воспользоваться им и использовать вместо него функцию анимации. Таким образом, ваш код становится: 

$("a.btn").hover(
    function(){
        $(this).siblings('.tip-wrapper').fadeIn(1000);
    },
    function(){
        $(this).siblings('.tip-wrapper').stop().hide();// or fadeOut();
    }
);

с .: используйте .siblings() вместо .parent().children()

0 голосов
/ 08 августа 2011

Во-первых, в вашем скрипте было несколько синтаксических ошибок (как указал gion_13).

Во-вторых, чтобы убедиться, что всплывающая подсказка не отображается ошибочно, если пользователь перемещает мышь до истечения времени ожиданиязавершив, вы захотите использовать переменную для хранения вашего тайм-аута, чтобы вы могли очистить его в параметре hover handlerOut.

Working Fiddle .

0 голосов
/ 08 августа 2011

Если мышь удаляется до того, как истечет время ожидания, вы сразу же hide() это сделаете, а после истечения времени ожидания show().

Вместо этого вы должны использовать hoverIntentплагин , который делает это за вас.

...