JavaScript/jQuery : Animated Cursor/Light Effect

Question

最近，我发现了一个带有动画光标元素的 SVG(就像您在屏幕上键入文本时看到的那种光标，就像我现在一样)。这背后的 JavaScript 基本上在打开和关闭之间切换目标元素的可见性。 “光标”元素是 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 中执行此操作？

(附言:是否有与上述代码等效的 jQuery？)

Answer 1

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

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

使用您提到的间隔开始淡入(利用 jQuery 函数)。传递回调以淡出。您可以随意调整时间以适应您的感觉