использовать задержку в Mouseenter JQuery - PullRequest
Новая
       21

использовать задержку в Mouseenter JQuery

2 голосов
/ 27 октября 2011

Я хочу показать подсказку через 5 секунд ввода мышью.

Я пытаюсь использовать следующий код 

$('thead').mouseenter( function() {
      var tooltip =  $('<div id="tooltip" class="tooltip-container" style="display: block;">'
        +   '<div class="tooltip ">'
        +   '<div class="tooltip-pointer"></div>'  
        +   '<div class="tooltip-body">'
        +   'Test description'
            +   '</div>'
        +   '</div>'
        +   '</div>').hide().fadeIn(1000);

    $(this).append(tooltip).delay(5000);
});

Но задержка подсказки не работает.Я хочу исчезнуть и задержать это.Пожалуйста, помогите мне.

Ответы [ 3 ]

3 голосов
/ 27 октября 2011

Задержка должна идти до появления fadein как части цепочки, как это: 

$('thead').mouseenter( function() {
      var tooltip =  $('<div id="tooltip" class="tooltip-container" style="display: block;">'
        +   '<div class="tooltip ">'
        +   '<div class="tooltip-pointer"></div>'  
        +   '<div class="tooltip-body">'
        +   'Test description'
            +   '</div>'
        +   '</div>'
        +   '</div>').hide();

    $(this).append(tooltip);
    tooltip.delay(5000).fadeIn(1000);
});

Надеюсь, это поможет!

0 голосов
/ 27 октября 2011

Как насчет использования setTimeout: 

$('thead').mouseenter( function() {
   var el = $(this);

   setTimeout(function() {
      var tooltip = $('<div id="tooltip" class="tooltip-container" style="display: block;">'
                  +   '<div class="tooltip ">'
                  +   '<div class="tooltip-pointer"></div>'  
                  +   '<div class="tooltip-body">'
                  +   'Test description'
                  +   '</div>'
                  +   '</div>'
                  +   '</div>').hide().fadeIn(1000);

      el.append(tooltip);
   }, 5000);

});

Примечание: чтобы не беспокоиться о том, как this устанавливается в функции, переданной в setTimeout Я сохраняю $(this) влокальная переменная вне функции тайм-аута.

0 голосов
/ 27 октября 2011

Вы должны сделать это так: 

$('thead').mouseenter( function() {
    setTimeout(function() {
      var tooltip =  $('<div id="tooltip" class="tooltip-container" style="display: block;">'
        +   '<div class="tooltip ">'
        +   '<div class="tooltip-pointer"></div>'  
        +   '<div class="tooltip-body">'
        +   'Test description'
            +   '</div>'
        +   '</div>'
        +   '</div>').hide().fadeIn(1000);

    $(this).append(tooltip);
    },5000);
});

Эта модификация предназначена для выполнения кода с задержкой в ​​5 секунд. Код будет добавлять новый элемент каждый раз, так что вы можете подумать о переписывании или очистке любых существующих всплывающих подсказок

...