Jquery闪烁/用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比较看起来有点hackish.有一个你来回切换的标志可能比较简洁,也许是一个数据属性:

$('#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);?