jQuery 및 CSS 전환으로 DOM 요소 색상 변경을 어떻게 원활하게 애니메이션화할 수 있습니까?

$('#someDiv').mouseover(function() {
  $(this).stop().animate({ backgroundColor: 'blue' }, { duration: 500 });
}).mouseout(function() {
  $(this).stop().animate({ backgroundColor: 'red' }, { duration: 500 });
});

$('#someDiv').addClass('blue').mouseover(function() {
  $(this).stop(true, false).removeAttr('style').addClass('red', { duration: 500 });
}).mouseout(function() {
  $(this).stop(true, false).removeAttr('style').removeClass('red', { duration: 500 });
});

<div>

#someDiv {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

$('#someDiv').mouseover(function() {
  $(this).addClass('blue');
}).mouseout(function() {
  $(this).removeClass('blue');
});