为什么 jquery fadeOut 与 setTimeout 的行为很奇怪?

发布于 2024-09-09 03:26:49 字数 852 浏览 2 评论 0原文

我有这样的代码:

clearTimeout(tooltiptimeout);
tooltiptimeout="";

$("#tool").fadeOut("slow").queue(function(){
    tooltiptimeout=setTimeout(function(){
        $("#tool").css("left",item.pageX-33);
        $("#tool").css( "top",item.pageY-95);
        $("#tool").fadeIn("slow");
    }, 1000);
    $(this).dequeue();
});

它应该做的是这样的:当用户将鼠标悬停在对象上时,工具提示将显示在那里。然后,当用户将鼠标移开时,工具提示应立即开始淡出。稍后,当用户将鼠标放在另一个对象上时,在工具提示显示在新位置之前会调用 1 秒的超时。

问题是,现在淡出不会立即被调用,而是仅在 setTimeout 发生时才会发生。 (即,不是先淡出,然后稍后显示。现在工具提示保持在原位,然后一段时间后,它淡出,然后在新位置淡入)。

什么给?

顺便说一句,这段代码有同样的问题:

    $("#tool").fadeOut("slow",function(){
    tooltiptimeout=setTimeout(function(){
        $("#tool").css("left",item.pageX-33);
        $("#tool").css( "top",item.pageY-95);
        $("#tool").fadeIn("slow");
    }, 1000);
});

I have this code:

clearTimeout(tooltiptimeout);
tooltiptimeout="";

$("#tool").fadeOut("slow").queue(function(){
    tooltiptimeout=setTimeout(function(){
        $("#tool").css("left",item.pageX-33);
        $("#tool").css( "top",item.pageY-95);
        $("#tool").fadeIn("slow");
    }, 1000);
    $(this).dequeue();
});

What it should do is this: As the user hovers his/her mouse over an object, a tooltip will show up there. Then when the user moves the mouse away, the tooltip should immediately start fading out. Later when the user rests his/her mouse on another object, a timeout of 1 second is called before the tooltip shows up at the new location.

The problem is, right now the fadeout does not get called immediately, and instead only occurs when the setTimeout occurs. (ie instead of first fading out then showing up a while later. Right now the tooltip stays in place, then a while later, it fades out and then fades in at new location).

What gives?

BTW, this code has the same problem:

    $("#tool").fadeOut("slow",function(){
    tooltiptimeout=setTimeout(function(){
        $("#tool").css("left",item.pageX-33);
        $("#tool").css( "top",item.pageY-95);
        $("#tool").fadeIn("slow");
    }, 1000);
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

清浅ˋ旧时光 2024-09-16 03:26:49

编辑:根据下面更新的评论更改了答案。

请尝试以下操作:

$("#tool").fadeOut("slow").delay('1000')
    .css("left",item.pageX-33)
    .css( "top",item.pageY-95)
    .fadeIn("slow");

Edit: Changed the answer based on updated comment below.

Try the following:

$("#tool").fadeOut("slow").delay('1000')
    .css("left",item.pageX-33)
    .css( "top",item.pageY-95)
    .fadeIn("slow");
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文