JavaScript/jQuery:动画光标/灯光效果

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 ms)
2. 保持可见时间小于半秒(500 ms)
3. 淡出(250 ms)
4. 重复1 ~ 3。

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

我对此的问题是:我如何在JavaScript或jQuery中做到这一点?

(注:

)

Answer 1

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

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

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