jquery - Divの背景色のCSSクラスのフェード効果?

Question

マウスオーバー時に div にフェード効果を追加しようとしています。フェード効果は、 の色を切り替えることですbackground-color。css クラスを瞬時に変更することはできますが、フェード アニメーションの作成には、fadeIn()または使用animate()は役に立ちませんでした。このアニメーションを作成するにはどうすればよいですか?

jQuery:

$('div.my-bkgr').mouseover(function() {
  $('div.my-bkgr').attr("class", "my-bkgr-mouseover");
}).mouseout(function() {
  $('div.my-bkgr').attr("class", "my-bkgr");
});

CSS:

.my-bkgr {
  background-color: #ECF0F1;
}

.my-bkgr-mouseover {
  background-color: #E74C3C;
}