-1

i would like to ask all , i am face with issue that i want to blink three html links when user clicks on the button with specific time

<a id="tip1">blink1</a> 
<a id="tip2">blink2</a> 
<a id="tip3">blink3</a>
<input type="button" value="CLICK ME" id="btn" />
 $("#btn").click(function () {
doBlink(900);
});
function doBlink(900)
{
set blink for $("#tip1") is 300, after finishing for blinking one, we will call for blink2..etc..
}

Thanks in advance

  • @MikeCheel A GIF would be severe overkill when this can easily be done with JS... – Dan Mar 04 '14 at 17:34

1 Answers1

0

Here is a Fiddle Demo that will do this:

$("#btn").click(function () {
    doBlink(900);
});

function doBlink(value) {
    var time = value/3;
    blink(1, time);
}

function blink(id, time) {
    var counter = 0;
    var interval = setInterval(function () {
       $("#tip" + id).toggleClass('blinked');
       counter += 50;
       if (counter >= time && id < 4) {
           clearInterval(interval);
           id++;
           blink(id, time);
       }
    }, 100);
}
Bic
  • 3,141
  • 18
  • 29