如何阻止元素淡出？

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

This应该做到这一点！

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秒后它将再次开始淡出。