如何阻止元素淡出？

Question

我有一個工具提示，然后在幾秒后消失。

function tooltip(msg) {
    tooltipStart(msg);
    tooltipExit();
}

function tooltipStart(msg) {
    $('body').append('<div id="tooltip">'+msg+'</div>');
    $('#tooltip').fadeIn(300);
}

function tooltipExit(duration) {
    if ( ! duration) {
        duration = 2000;
    }

    $('#tooltip').delay(duration).fadeOut(1000, function() {
        $('#tooltip').remove();
    });
}

我現在希望工具提示不淡出，如果用戶將鼠標懸停在工具提示上，則100％不透明。

我是否需要重寫工具提示的工作方式，或者當鼠標懸停在工具提示上時是否有辦法停止tooltipExit功能？

Answer 1

這應該做的伎倆！

function tooltipExit(duration) {
    $('#tooltip').delay(duration||2000).fadeOut(1000, function() {
        $(this).remove();
    }).hover(function() {
        $(this).stop().show().fadeTo(0, 100);
    }, function (){
        tooltipExit();
    });
}

stop函數停止動畫， show函數將再次顯示工具提示。 然后當鼠標再次離開工具提示時，2秒后它將再次開始淡出。