javascriptjqueryhtmlcssjquery-effects

How to do car turn lights (blinkers) with jQuery?

I have some strange task to do. I have to implement car turning lights functionality into my web page. I have two buttons (left and right) and two green arrows (left and right). It should be that: I click left button (left arrow is now hidden) and left arrow should blink. When I click once more time, it should stop animation and be hidden. I just don't know to handle state of button and use it properly. Thanks.

$("#arrow-left").click(function blinker() { 
    if(something) {
       $('#arrow-left-blink').css("visibility", "visible");
        $('#arrow-left-blink').fadeOut(500);
        $('#arrow-left-blink').fadeIn(500);
        setInterval(blinker, 1000);
    } else {
     //hide
    }
}
Solution

  • I would create a css class to handle the fading and blinking with css animations and just toggleClass on click in Jquery.