Jquery flash/change border color with css

Question

Without using any other jquery plugin I'm looking to continuously flash/change a div's border color. So it should start with white then after 1 sec change to orange, then repeat.

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

To stop flashing:

window.clearInterval(flashInterval);

Solution without flash:

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

It looks a bit hackish with the rgb comparison. It might be neater to have a flag that you toggle back and forth, perhaps a data property:

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

Answer 2

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

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

}

makewhite();

Looked everywhere and could not find any direct solution to my problem so I constructed the above which works.

Im sure there is a quicker way to write this...