JQuery CSSのカラーフェードインを行う方法は？

Question

誰かがフォームの領域を塗りつぶしたら、IDを取得して緑色に変わります。私は緑が消えて行きたいと思っています。何らかの理由で、このコードでは消えるだけです。

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

私は提案から、これを試していたが、それでもそれが動作するように取得していない：

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

Answer 1

はあなたには、いくつかを実行する場合だけblurにfocusを変更、CSSアニメーションでそれを試してみてくださいフィールドが記入された後の行動。

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