Jquery div strobe

I would like to have a div act like a strobe light with jquery. Basicly change the background color from black to white every 500 milliseconds.

How can I do that?

<div id="strobe"></div>

开发者_运维知识库Thank you!

The setInterval() function is your friend here.

You don't need to use JQuery, you can do it inn pure javascript - this is how you'd do it:

var elem = document.getElementById("strobe");
var strobeBackground = function() {
   (elem.style.backgroundColor == "white") ? elem.style.backgroundColor = "black" : elem.style.backgroundColor = "white";
}

setInterval(strobeBackground, 500);

However if you want to do it in jQuery, here it is: http://jsfiddle.net/Ru9xt/2/

The HTML would look like this:

 <div id="strobe" class="white">Hello</div>

The CSS would look like this:

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

And the JS is here:

setInterval(function () {
        $("#strobe").toggleClass('black');
    }, 500);

You can use jQuery for both checking the background color of the element and for setting the interval at which it flickers with the $.css() method which gets or sets the style of an element and the setInterval() method which sets up a reoccurring method call.

function toggle(){
    var strobe = $('#strobe');
    if(strobe.css('background-color') == '#FFFFFF'){
        strobe.css('background-color', '#000000');
    }else{
        strobe.css('background-color', '#FFFFFF');
    }
}

setInterval(toggle, 500);

I used classes instead:

/**
 * Initialise strobe using classes. By Emmanuel Mahuni - 2015
 * @param {string} sel selector
 * @param {int} i speed in milli-seconds
 * @param {string} c1 class 1
 * @param {string} c2 class 2
 * @returns {int} the interval id so that you can clear it later
 */
function initStrobeClass(sel, i, c1, c2) {
    return setInterval(strobeClass, i,sel,c1,c2);
}

/**
 * Strobe using classes. By Emmanuel Mahuni - 2015
 * @param {string} sel selector
 * @param {string} c1 class 1
 * @param {string} c2 class 2
 */
function strobeClass(sel, c1, c2) {
    var s = $(sel);
    s.toggleClass(c1 + " " + c2);
}

/**
 * Clear the strobe to a particular class
 * @param {int} t interval id
 * @param {string} sel selector of the element
 * @param {string} c the class to set after clearing the strobe
 * @returns {null} returns null to make sure we don't come back here again, make sure the interval id is set by this and do the checking to eliminate errors.
 */
function clearStrobeToClass(t, sel, c) {
    clearInterval(t);
    $(sel).attr('class', c);
    return null;
}

usage:

The code below will begin strobbing the logout button when the count down is below 181. It will restore it when it goes above 180.

if (autoLogoutCountdown <= 180 && (typeof strobeLogoutTimer !== typeof NaN)) {
    strobeLogoutTimer = initStrobeClass('#logout', 1000, 'logoutflash', 'logout');
} else if (autoLogoutCountdown > 180 && (typeof strobeLogoutTimer === typeof NaN)) {
    strobeLogoutTimer = clearStrobeToClass(strobeLogoutTimer, '#logout', 'logout');
}

I hope this helps someone