Добавление светящейся нижней границы с помощью 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>

Answer 2

Вы должны были бы это 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");