Question

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

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

Answer 1

你需要这个CSS：

-webkit-box-shadow:0 2px 1px 0 green; 
-moz-box-shadow: 0 2px 1px 0 green; 
box-shadow:0 2px 1px 0 green;

以下是JSFiddle

上的演示

HTML：

<div id="regionItemListing">

</div>

CSS：

#regionItemListing{
width: 100px;
height:100px;
background-color: gray;  
margin:50px 50px;

-webkit-box-shadow:0 2px 1px 0 green; 
-moz-box-shadow: 0 2px 1px 0 green; 
box-shadow:0 2px 1px 0 green;

}

jQuery的：

$('#regionItemListing').css("box-shadow:0 2px 1px 0 green");

Answer 2

你可以这样做。

$("#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>

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

2 个答案: