jquery - 使用 jQuery 添加发光的底部边框

Question

如何使用 jQuery 添加发光的底部边框？

$('#regionItemListing').css("border-bottom", "3px solid #F7941D");

Answer 1

你可以这样做。

$("#start").click(function() {
    switch($(this).hasClass("animated")) {
        case true: $(this).removeClass("animated"); $(this).text("Loading cancelled, Try Again?"); break;
        case false: $(this).addClass("animated"); $(this).text("Loading please wait... Cancel by Click"); $break;
    }
});

button.animated {
    -webkit-animation: example 1s infinite; /* Chrome, Safari, Opera */
    animation: example 1s infinite;
  
}
button {
  background: rgba(0,0,0,0.1);
  width: 100%;
  border: 0px;
  outline: 0px;
  color: #4F4F4F;
  padding: 5px;
  font-weight: bold;
  border-bottom: 2px solid rgba(0,0,255,0.2);
  box-shadow: 0px 0px 5px #4F4F4F;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {border-bottom: 3px rgba(0,0,255,0.1);}
    50%  {border-bottom: 3px rgba(0,0,255,0.5);}
    100%  {border-bottom: 3px  rgba(0,0,255,0.1);}
}

/* Standard syntax */
@keyframes example {
    0%   {border-bottom: 3px rgba(0,0,255,0.1);}
    50%  {border-bottom: 3px rgba(0,0,255,0.5);}
    100%  {border-bottom: 3px  rgba(0,0,255,0.1);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">Load</button>