JavaScript/jQuery : Animated Cursor/Light Effect

Question

最近，我发现了一个带有动画光标元素的 SVG(就像您在屏幕上输入文本时看到的光标一样，就像我现在一样)。其背后的 JavaScript 基本上在打开和关闭之间切换目标元素的可见性。 “cursor”元素是 SVG 文件中唯一受 JavaScript 影响的部分。我发现它也可以定位 HTML 文档对象。

这是原始的 JavaScript，其中 id="cursor" (#cursor) 标记目标元素:

var visible = true;
setInterval(function () {
    document.querySelector('#cursor').style.opacity = visible ? 0 : 1;
    visible = !visible;
}, 550);

我想要做的是更改此代码以使其淡入和淡出。最终效果如下:

1. 快速淡入(250 毫秒)
2. 保持可见时间少于半秒(500 毫秒)
3. 淡出(250 毫秒)
4. 重复1.~3。

换句话说，步骤 1 到 3 都将在一秒内，每秒秒发生。

我对此的问题是:如何在 JavaScript 或 jQuery 中执行此操作？

(P.S.:是否有与上述代码等效的 jQuery？)

Answer 1

使用 jQuery，您可以执行以下操作

setInterval(function () {
    $("#cursor").fadeIn(500, function(){
        $(this).fadeOut(500);
    });
}, 1000);

使用您提到的间隔来开始淡入(利用 jQuery 函数)。传递回调以淡出。您可以根据自己的感觉调整时间