I would like to make my button's border blink. But for some reason it's not working.
I am using the code below. Can someone please help me?
<input type="button" value="Blinking Button" id="btn" />
var timer;
function blinking(elm)
{
timer = setInterval(blink, 10);
function blink() {
elm.animate({border-color: '#FE642E'}, 1000,
function(){$(this).animate({ border-color : '#424242' }, 1000) });
});
}
}
blinking($("#btn"));
[JSFiddle Link][2]
I am using below code ant it works. But I want to make it simple and can apply this functionality to more than 1 button
var blink = (function() {
var i = 0;
var step = 10;
var up = true;
var timer = null;
var next = function() {
if (up) {
i += step;
}
else {
i -= step;
}
if(i<0){i=0; up=true;}
if(i>255){i=255; up=false;}
update();
};
var update = function()
{
var btnHighlighted = $('#btnNext');
if (i%2 == 0) {
btnHighlighted.css("border-color", '#FE642E');
}
else {
btnHighlighted.css("border-color", '#424242');
}
};
var go = function() {
next();
timer = window.setTimeout(blink.go, 30);
};
return {
go: go
};
}());
Please find the JSFiddle Link for above code
I found the solution for the problem.
Below is the link for Blinking Button border http://jsfiddle.net/umw8d/
function blink(btn) {
blink1(btn);
}
function blink1(btn1) {
//document.getElementById(btn1).className = ;
btn1.removeClass();
btn1.addClass("highlight");
setTimeout(function () { blink2(btn1); }, 750);
}
function blink2(btn2) {
//document.getElementById(btn2).className = "highlighted";
btn2.removeClass();
btn2.addClass("highlighted");
setTimeout(function () { blink1(btn2); }, 750);
}
blink($('#btn'));