8

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

4

4 回答 4

14

如果您的浏览器要求允许您使用 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/

于 2013-09-03T01:04:57.773 回答
4

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

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

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

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

于 2013-09-03T00:59:25.257 回答
0

有几种方法可以做到这一点。您可以使用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 );
于 2013-09-03T01:01:12.063 回答
0

根据您对 CSS3 的要求和使用（或缺少 CSS3），您可能希望使用 Javascript/jQuery 执行此操作，特别是使用 jQuery，您可能希望查看jQueryUI。

我建议你看看这个 StackOverflow 问题。

但是，至于一些即时的满足感，这里有一个从上述问题修改的跨浏览器小提琴可能就足够了，或者至少给你一个很好的起点（没必要，我仍然建议你进一步研究一下并查看链接也提供...）

小提琴的代码：

查询：

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>
于 2013-09-03T01:05:43.877 回答