Search code examples
jqueryblink

Blink Border of Button Jquery


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"));

JS Fiddle Link1

[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


Solution

  • 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'));