4

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

4

3 回答 3

11

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);​
于 2012-06-20T13:30:15.180 回答
1 
function makewhite() {
  setTimeout(function() {
        $('#problem').css('border-color','#ffffff');
        makeOrange();
    }, 1000);

}
function makeOrange() {
  setTimeout(function() {
        $('#problem').css('border-color','#F37543');
        makewhite();
    }, 1000);

}

makewhite();

到处找，找不到任何直接解决我的问题的方法，所以我构建了上面的方法。

我相信有一个更快的方法来写这个......

于 2012-06-20T13:30:10.513 回答
1

根据您的兼容性要求，您可以仅使用 css 执行此操作：

@-webkit-keyframes DIV-BORDER {
    0%   { border-color: orange }
    50%  { border-color: white }
    100% { border-color: orange }
}

div {
    border: 1px solid;

    -webkit-transition: all 1s;
    -webkit-animation: DIV-BORDER 2s infinite;
}​

相应地添加供应商前缀。

编辑：在 webkit 浏览器中工作的示例小提琴。

于 2012-06-20T13:45:20.007 回答