Sol Sol - 3 months ago 10
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 = this.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

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() {
  $(this).addClass("correct");
});
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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input />