CODEWITHSUNDEEP
jquery
AndrewC
AndrewC

Reputation: 1352

Jquery flash/change border color with css

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.

Upvotes: 4

Views: 8646

Answers (3)

Per Salbark
Per Salbark

Reputation: 3645

Depending on your compatibility requirements you could do this with only 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;
}​

Add vendor-prefixes accordingly.

EDIT: Sample fiddle working in webkit browsers.

Upvotes: 1

David Hedlund
David Hedlund

Reputation: 129792

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

Upvotes: 11

AndrewC
AndrewC

Reputation: 1352

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...

Upvotes: 1

Related Questions