javascript - 使用什么技术手动使文本具有闪烁效果

Question

我知道我可以使用它来更改文本的颜色

$(#text).css('color', 'red');

我的 javscript 应该如何以大约 200 毫秒的间隔让它闪烁为红色和黑色？

如果我能做这样的事情就好了

    function loop() {
        setTimeout(function () {
            ChangeTextToRed();

            <pause for 300ms here>

            ChangeTextToBlack();
            loop();
        }, 300);
    }

但我知道javascript中没有thread.sleep

Answer 1

使用 setInterval 和 jquery 的 toggleClass() 方法，您可以非常轻松地完成此操作。

setInterval(function() {
    $('#text').toggleClass("blink");
}, 300);

您只需添加/删除具有其他颜色的类。查看 jsfiddle 上的工作示例：http: //jsfiddle.net/UFfRc/

编辑：只是想提供更多信息。这种方法（使用类）的好处是您可以在不编辑 javascript 的情况下对其进行自定义。您可以添加过渡、移动等。此外，这将在不支持 css3 过渡的浏览器上正常降级。他们只会看到没有转换的状态变化。这是一个例子。http://jsfiddle.net/rRXGc/

说了这么多，负责。:)

Answer 2

您可以尝试使用以下setInterval方法：

setTimeout(function () {
    // do something here
}, 300);

这允许您定期执行一些代码（本例中为 300 毫秒）

Answer 3

只需使用setInterval并在两个类之间切换。

setInterval(function() {
    var newClass = '.'+ $('#text').hasClass('black') ? 'red' : 'black';

    $('#text').attr('class', newClass);
}, 300);

Answer 4

您已经使用过setTimeout，您将不得不这样做两次：

function loop() {
    setTimeout(function () { // pause for 300ms before executing this:
        ChangeTextToRed();
        setTimeout(function () { // pause for 300ms before executing this:
            ChangeTextToBlack();
            loop();
        }, 300);
    }, 300);
}

或更短：

function loop() {
    ChangeTextToRed();
    setTimeout(function () {
        ChangeTextToBlack();
        setTimeout(loop, 300);
    }, 300);
}

当然，你也可以使用setInterval和维护一个布尔标志来进行更改，但上面的内容很简单。

Answer 5

我知道这不是一个很大的支持 CSS 功能，但你可以使用动画

#text{
   animation:blackred 400ms linear infinite; -webkit-animation:blackred 400ms linear infinite; -moz-animation:blackred 400ms linear infinite; -o-animation:blackred 400ms linear infinite;
}

@keyframes blackred{
0%{color:red;}
50%{color:black;}
100%{color:red;}
}


@-webkit-keyframes blackred{
0%{color:red;}
50%{color:black;}
100%{color:red;}
}

@-moz-keyframes blackred{
0%{color:red;}
50%{color:black;}
100%{color:red;}
}

@-o-keyframes blackred{
0%{color:red;}
50%{color:black;}
100%{color:red;}
}