0

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

Ande
  • 11
  • 1
  • 5
  • 1
    On your JSFiddle I'm clicking the checkbox and the corresponding button is indeed blinking (on Chrome) – Josh Liptzin Feb 28 '14 at 02:23
  • @JoshLiptzin: True, but the OP wants the button's **border** to blink, not the whole thing. – rvighne Feb 28 '14 at 02:25
  • http://jsfiddle.net/p23zn/130/ – Ande Feb 28 '14 at 02:26
  • Hay Thanks for Quick Reply, I have updated the link. New link is http://jsfiddle.net/p23zn/130/ – Ande Feb 28 '14 at 02:26
  • Did you see that happen somewhere? I'm thinking you might have to have a
    behind the button that is positioned so it looks like the button border and have that blink. jQuery is applying the animation to the object, not attributes/properties on the object.
     – VtoCorleone Feb 28 '14 at 02:28
  • I have updated the post whith the code i currently use. The problem is I am not abel to make it generic so that i can use same code to other buttons. – Ande Feb 28 '14 at 02:33
  • I was able to find the solution for the Blinking Button border. Link is http://jsfiddle.net/umw8d/ – Ande Mar 08 '14 at 02:49

1 Answers1

1

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'));
Ande
  • 11
  • 1
  • 5