Jquery flash/用 css 改变边框颜色

Question

在不使用任何其他 jquery 插件的情况下，我希望连续闪烁/更改 div 的边框颜色。 所以它应该从白色开始，然后 1 秒后变为橙色，然后重复。

Answer 1

CSS:

#my-div { border: 1px solid white; }
#my-div.orange-border { border: 1px solid #f93; }

HTML:

<div id="my-div"></div>

JavaScript:

var flashInterval = setInterval(function() {
    $('#my-div').toggleClass('orange-border');
}, 1000);

停止闪烁:

window.clearInterval(flashInterval);

无闪光灯的解决方案:

$('#my-div').css({ border: '1px solid white' });

setInterval(function() {
    var isWhite = $('#my-div').css('border-color') == 'rgb(255, 255, 255)';
    $('#my-div').css({ 'border-color' : isWhite ? '#f93' : '#fff' });
}, 1000);​

与 RGB 比较，它看起来有点黑客。拥有一个可以来回切换的标志可能会更整洁，也许是一个数据属性:

$('#my-div').css({ border: '1px solid white' }).data('white', true);

setInterval(function() {
    var isWhite = $('#my-div').data('white');
    $('#my-div').css({ 'border-color' : isWhite ? '#f93' : '#fff' }).data('white', !isWhite);
}, 100);​