CODEWITHSUNDEEP
jqueryhtmlcss
Xtian
Xtian

Reputation: 3587

Indicator Light with jQuery?

I have an image of a light off and a light on and would like it to switch back and forth between these images giving the impression a blinking light. Does anyone know of a Jquery function or plugin that can easily do this?

Thanks

Upvotes: 0

Views: 1688

Answers (2)

meloncholy
meloncholy

Reputation: 2192

If you want to fade between your images (which may be pretty, depending on the pictures), you could use jQuery's animation queue. Perhaps something like

    function blink()
    {
        $("#on").fadeIn(1000).delay(2000).fadeOut(1000, blink);
    }

Overlay the images so the the on image is on top of the off image.

Upvotes: 1

Intelekshual
Intelekshual

Reputation: 7566

You can do this with simple jQuery and CSS.

Define a class to represent the "on" state and toggle it using setInterval.

$(function() {
    setInterval(function() {
        $('.blinking-light').toggleClass('on');
    }, 1000);
}

The rest is just CSS.

Upvotes: 3

Related Questions