18910140161

JavaScript-在文本上显示图像,如果鼠标在新的文本上溢出,则使用隐藏或立即隐藏延迟

顺晟科技

2022-10-19 11:51:06

218

所以我有一个这样的图像将显示当某些文本被鼠标拖动时,它将延迟当鼠标被取下时消失,这很好。但是我有多个图像,可以显示取决于悬停的文本,我想有第一个图像跳过它的延迟,如果其他文本是鼠标覆盖,这样它就不会扩展页面和堆叠图像。这可能吗?还是我只需要拖延一下?这是在jQuery

中完成的
$("h2").mouseover(function ()
    {
        let mouseText = $(this).attr("class").split(" ")[0];
        
        switch(mouseText)
        {
            case "wh-light":
                imgID += mouseText;
                break;
            case "wh-hl-ll":
                imgID += mouseText;
                break;
            case "part-hh-ll":
                imgID += mouseText;
                break;
        }

        $(imgID).show();
    });

$("h2").mouseout(function ()
    {
        $(imgID).delay(1000).hide(0);
    });

我可以提供HTML,但我不认为它与此太相关。提前感谢您的帮助!


顺晟科技:

没有你的模板和完整的代码,我必须设计一个完整的例子······但是下面的片段应该给你一个很好的例子,说明你必须做什么。您需要跟踪当前映像,并且回调必须知道延迟开始时当前映像是什么,并将其与当前映像进行比较,以知道是否应该执行任何操作。

出于这个原因,我将代码拉到单独的javascript函数中,并使用setTimeout而不是jquery delay()。实际jquery站点上的文档甚至提到delay函数是有限的,无法取消它本身,因此不应将其视为setTimeout()的替代品。

refhttps://api.jquery.com/delay/

.delay()方法最适合在排队的jQuery效果之间进行延迟。因为它是有限的--例如,它没有提供取消延迟的方法。delay()不是JavaScript原生setTimeout函数的替代品,该函数可能更适合某些用例。

不知道如何构建或清除imgID变量...我添加了baseImageID和targetImageID变量,这样就不会将新字符串连续连接到imgid的末尾了...

作为最后一个音符...我喜欢让事情非常模块化和冗长时,通过一个解决方案,所以请不要讨厌额外的功能...我认为它们使解决方案更容易理解。实际实现可以简化...

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航