在鼠标输入jquery中使用延迟

use delay in mouseenter jquery

本文关键字：延迟 jquery 鼠标 输入      更新时间：2023-09-26

我想在鼠标进入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);
});

但是工具提示延迟不起作用。我想淡化它，延迟它。请帮帮我。

延迟需要在淡出之前作为链的一部分，如下所示:

$('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);
});

我希望这对你有帮助!

你应该这样做:

$('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秒的延迟执行代码。但是代码每次都会添加一个新元素，所以您可能会考虑重写或清理任何现有的工具提示

如何使用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);
});

注意:为了不担心如何在传递给setTimeout的函数中设置this，我将$(this)保存在超时函数之外的局部变量中。

相关文章：