Question

还应显示图像以显示加载过程。在mouseout中，div应该消失。我的代码：

$("a").mouseenter(function() {
    var link = $(this).attr("href");
    $("#flash").show();
    $("#flash").fadeIn(3000).html("<img src='load.gif' />");
    $("#div"+link).slideDown(100);
    $("#flash").fadeOut();
});

$("a").mouseout(function() {
    $("#flash").fadeOut(1000);
});

Answer 1

查看jQuery的.delay()方法：

它基本上像setTimeout但允许链接。

Answer 2

$("my-element").mouseenter(function(){
$(this).delay(2000).fadeIn();
});

Answer 3

我假设您希望div + link部分在几秒后滑下来？ setTimeout()对此有好处。

$("a").mouseenter(function(){

        var link = $(this).attr("href");
        $("#flash").show();
        $("#flash").fadeIn(3000).html("<img src='load.gif' />");

        setTimeout(function() {
           $("#div"+link).slideDown(100);
        }, 2000);

        $("#flash").fadeOut();
});

<强>更新 setTimeout的问题是你排队后无法取消它。相反，您可以尝试setInterval，因为它会返回您稍后可以调用clearInterval的计时器ID。

var timerId = null;

$("a").mouseenter(function(){
    var link = $(this).attr("href");
    $("#flash").show();
    $("#flash").fadeIn(3000).html("<img src='load.gif' />");

    timerId  = setInterval((function() {
                   clearInterval(timerId);
                   $("#div"+link).slideDown(100);
               }, 2000);

    $("#flash").fadeOut();
});

$("a").mouseout(function(){

    clearInterval(timerId);
    $("#flash").fadeOut(1000);

});

请致电clearInterval，这样功能调用不会重复。

使用jQuery鼠标悬停后，如何在几秒后出现div？

3 个答案: