Question

我想让按钮的边框闪烁。但由于某种原因，它无法正常工作。

我正在使用以下代码。有人可以帮助我吗？

<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]

我使用下面的代码蚂蚁它的工作原理。但我希望简化并将此功能应用于多个按钮

    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
    };
   }());

请找到上面代码的JSFiddle Link

Answer 1

我找到了问题的解决方案。

以下是闪烁按钮边框的链接 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'));

按钮Jquery的闪烁边框

1 个答案: