Question

我想知道是否有人可以帮助我在两秒后将div的颜色从黑色变为白色，然后在两秒后从白色变为黑色，再次返回等等，只要div存在。换句话说，只有当用户点击并拖动表面时才会显示div（就像桌面选择区域一样），我的目标是在用户仍在选择时更改边框的颜色，如上所述表面就像重新调整div一样。

Answer 1

如果您的浏览器要求允许您使用css3，则根本不需要任何javascript。

HTML：

<div class="blinkdiv">
</div>

CSS：

@-webkit-keyframes blackWhite {  
  0% { background-color: white; }
  50% { background-color: white; }
  51% { background-color: black; }
  100% { background-color: black; }
}

.blinkdiv {
    height: 100px;
    background-color: black;
    -webkit-animation-name: blackWhite;  
    -webkit-animation-iteration-count: infinite;  
    -webkit-animation-duration: 2s; 
}

以下是一个示例：http://jsfiddle.net/tommcquarrie/w3Qy9/1/

Answer 2

这会在每2秒后将背景颜色从黑色转换为白色，然后重复..

body {
    -webkit-animation:name 2s infinite;
}

@-webkit-keyframes name {
    0% {background-color:black;}
    100% {background-color:white;}
}

jsFiddle demo ..尚未在许多浏览器中对其进行测试..适用于Chrome。

Answer 3

有几种方法可以做到这一点。您可以使用始终生成另一个setTimeout的setTimeout（直到div消失），或者您可以使用setInterval并切换颜色（使用clearInterval停止如果要删除元素的过渡）。我觉得后一种方法更直接一点，所以我会用那个：

var toggleIntervalId = setInterval( function() {
    var $div = $('#toggleMe');
    if( $div.length ) {
        $div.attr( 'background-color', $div.attr('background-color')=='black' 
            ? 'white' : 'black' );
    } else {
        clearInterval( toggleIntervalId );
}, 2000 );

Answer 4

根据您对CSS3（或缺少CSS3）的要求和用法，您可能希望使用Javascript / jQuery，尤其是使用jQuery，您可能希望查看jQueryUI。

我建议你看一下this StackOverflow question。

然而，至于一些即时满足，这里是一个跨上浏览器Fiddle从上面的问题修改，可能就足够了，或者至少给你一个很好的起点（不用，我仍然建议你研究这个进一步，并查看提供的链接...）

小提琴的代码：

JQuery的：

function changeColor(element, curNumber){
    curNumber++;

    if(curNumber > 2){
        curNumber = 1;
    }
    console.log(curNumber);
    element.addClass('color' + curNumber, 500);
    element.attr('class', 'color' + curNumber);
    setTimeout(function(){changeColor(element, curNumber)}, 1000);  
}

changeColor($('#testElement'), 0);

CSS：

.color1{
    background: white;
    color: black;
}

.color2{
    background: black;
    color: white;
}

HTML：

<div id="testElement">This will change colors</div>

随着时间的推移来回改变颜色与css

4 个答案: