在mouseenter jquery中使用延遲

我想在5秒的鼠標輸入後顯示我的工具提示。在mouseenter jquery中使用延遲

我嘗試下面的代碼

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

但刀尖延遲不工作。我想淡化它並延緩它。請幫幫我。

來源

2011-10-27 Dinuka Thilanga

延遲需要淡入之前去的鏈條是這樣的一部分：

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

希望這有助於！

來源

2011-10-27 12:45:21 dSquared

我喜歡你的解決方案。但它不起作用。 –

@Asuraya你收到了什麼錯誤？有沒有任何代碼沒有包含在你的OP中？ – dSquared

現在是工作。謝謝。 –

你應該這樣做，像這樣：

$('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秒的延遲來執行代碼。該代碼會雖然添加了新的元素eachtime，所以你可能會考慮重寫或清除任何現有的工具提示

來源

2011-10-27 12:41:28

如何使用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)功能中設置。

來源

2011-10-27 12:46:23 nnnnnn

在mouseenter jquery中使用延遲

回答

相關問題