CODEWITHSUNDEEP
jquery
Sol
Sol

Reputation: 265

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");
});

Upvotes: 0

Views: 134

Answers (1)

Zoltan Toth
Zoltan Toth

Reputation: 47667

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 />

Upvotes: 1

Related Questions