CODEWITHSUNDEEP
javascriptjqueryhtmlcsscolors
Joheo
Joheo

Reputation: 352

Change color with css over time back and forth

I was wondering if someone could help me change the color of a div from black to white after two seconds, then from white to black after two seconds, back again and so on as long as the div exists. Putting it other way, the div is only shown whenever a user clicks and drags a surface (just like the desktop selection area) and my objective is to change the color of the borders as described above while the user is still making his selection on the surface just as resizing the div.

Upvotes: 11

Views: 35035

Answers (4)

Josh Crozier
Josh Crozier

Reputation: 240868

This will transition the background color from black to white after every 2 seconds, and repeat..

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

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

jsFiddle demo.. haven't tested it in many browsers.. works in Chrome.

Upvotes: 6

Friendly King
Friendly King

Reputation: 2476

Depending on your requirements and usage of CSS3 (or lack thereof), you may want to do this with Javascript/jQuery, and in particular with jQuery, you will likely want to look into jQueryUI.

I suggest you take a look at this StackOverflow question.

However, as for some instant gratification, here's a cross-browser Fiddle modified from the above question that will probably suffice, or at least give you a good starting point (needless, I still suggest you research this a bit further and look into the links provided as well...)

The Fiddle's code:

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>

Upvotes: 0

Tom McQuarrie
Tom McQuarrie

Reputation: 1147

If your browser requirements allow you to use css3 you don't need any javascript at all.

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; 
}

Here's an example: http://jsfiddle.net/tommcquarrie/w3Qy9/1/

Upvotes: 19

Ethan Brown
Ethan Brown

Reputation: 27282

There are a couple of ways to do this. You could either use a setTimeout that always spawns another setTimeout (until the div disappears), or you could use a setInterval and toggle the color (with a clearInterval to stop the transition if the element should be removed). I feel like the latter approach is a little more straightforward, so I'll use that one:

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 );

Upvotes: 0

Related Questions