Sol Sol - 1 year ago 62
jQuery Question

How to make JQuery CSS color fade in then out?

So when someone fills out an area of a form then it this gets the id and turns green. I would like the green to fade in then out. For some reason it only fades in with this code.

var id =
$("#"+ id).css({border: '0 solid rgb(0, 255, 12)'}).animate({ borderWidth: 2}, "fast");

I did try this, from the suggestions, but still didn't get it to work:

$("#"+ id).css(function(){
$(this).animate({ backgroundColor: "#000000" }, "slow");
}, function() {
$(this).animate({ backgroundColor: "#a7bf51" }, "slow");

Answer Source

Try it with CSS animation, just change focus to blur if you want to perform some actions after the field is filled in.

$("input").on("focus", function() {
input {
  border: 2px solid #ccc;
  outline: 0;
  padding: .5em;

.correct {
  border: 2px solid #ccc;
  animation-duration: 3s;
  animation-name: fade;

@keyframes fade {
  0% { border-color: #ccc; }
  50% { border-color: rgb(0, 255, 12); }
  100% { border-color: #ccc; }
<script src=""></script>
<input />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download