Question

我试图制作一个悬停弹出窗口，其中包含学校项目的活动信息。

当我没有悬停弹出窗口时，我需要将其移除，但是如果你在一秒之内进入，它应该清除我的超时。但它不会。

这是我的代码：

var timer;
var events = [1, 10, 18, "Museum De Vishal", 'event informatie', 'imgpath'];

$('.event:not(.order)').hover(function () {
    var offset = $("#planyourday").offset();
    var offsetTop = $(this).offset();
    var width = $("#planyourday").width();
    var height = $("#planyourday").height();
    var eventHeader = events[3];
    var eventImg = events[5];
    var eventInfo = events[4];

    $('#planyourday').append("<div title='press here for more information' class='hidden meh' id='eventInfo'><div class='arrow_box'></div><div class='eventMenu'><h2 class='eventHeader'></h2><div title='Close this' class='eventRemove'>X</div></div> <br /><img class='eventImg' /><br /><p class='eventInfo'></p></div>");
    $('#eventInfo').css({ "top": offsetTop.top + 35 + "px", "left": offsetTop.left + "px", "height": (height - 8) + "px", "bottom": -height + "px" });
    $('.arrow_box').css({ left: offsetTop.left + "px" });
    $('.eventHeader').html(eventHeader);
    $('.eventImg').attr('src', eventImg);
    $('.eventInfo').html(eventInfo);
    $('#eventInfo').slideDown();
}).children('.order').mouseover(function () {
    return false;
});


$('body').on("mouseenter", "#eventInfo, .event", function () {
    $(this).css({ border: "1px solid red" })
    ClearTimer();
});


$('body').on("mouseout", "#eventInfo, .event", function () {
    StartTimer();
});
function ClearTimer() {
    clearTimeout(timer);
}

function StartTimer() {
    timer = window.setTimeout(function () {
        $('#eventInfo').remove();
    }, 5000);
}

我希望你们能帮助我，Thnx：）

更新：这是JSFiffle，http://jsfiddle.net/3uzo25cj/

更新：我使用了鼠标输出错误的鼠标事件，应该使用mouseleave。

Answer 1

您应该在开始新计时之前清除正在运行的计时器：

function ClearTimer() {
    clearTimeout(timer);
}

function StartTimer() {
    ClearTimer();

    timer = window.setTimeout(function () {
        $('#eventInfo').remove();
    }, 5000);
}

Answer 2

$('body').on("mouseleave", "#eventInfo, .event", function () {
    StartTimer();
});

Jquery动态创建的元素不会ClearTimeout（）;

2 个答案: