scrollファンクションの中でanimateメソッドが動かない

jQueryを使用して、スクロールして可視化領域に入ったら、animateメソッドでアニメーションをつけつつ文字の色を変えたいです。

しかし、下記のコードがスクロール位置に関するif文の中で動きません。
何故、動かないのでしょうか？

        $(this).animate({
            'color':'red'
        },1000);

下記は動きますが、やはり上記のようなアニメーションがほしいです。

$(this).css('color','red');

コードは下記の通りとなります。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style>
        body {
            font-size: 30px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <div class="elem">
        <pre>
            Lorem ipsum dolor sit amet, cu vel hinc velit, vel nobis accusam deleniti no. No qui numquam voluptatum comprehensam, fuisset offendit pertinax ut est. Ex usu idque pericula, has an legere prodesset delicatissimi. Qui eu legere dictas appellantur, ex vel mentitum perpetua suscipiantur, ne cum mediocrem assueverit.

            Dissentias dissentiet nam in, temporibus ullamcorper id nec, ad nostrum probatus vituperatoribus vix. Est idque veritus offendit in, at tantas aperiam laboramus vis. Ei has solum periculis assentior, libris voluptatibus no pri. Vix cu debet regione, vim odio zril ex. Nam te quas impedit, ex facete docendi efficiantur mei.
            
            At soluta omnium sit, solum partiendo ullamcorper id mea. Porro elaboraret eu nam. Duo adhuc aperiri minimum ut, case quando doming pro at, laudem option id mea. Usu mucius facete cetero cu, ius at omnis tibique recusabo. Ut pro brute accusamus, moderatius accommodare usu ex, dicat petentium expetenda no sea.
            
            Eu est liber delenit ponderum, dicam adolescens no nam. Quod labore viderer cu his. Impetus pertinacia id est, cum an case nonumy propriae, vitae dicunt qui eu. Eos justo virtute an, at simul iuvaret repudiandae pro, nec nobis intellegat voluptatum ne.
            
            Ex ullum option fabellas vim. Decore dictas conceptam et qui. Per at verear dolorum blandit, ad ferri semper complectitur sit, qui et probatus consetetur. Nostrum voluptua in his, usu adipisci conceptam in.
    </pre>
//上記を6回HTMLに直書きして、スクロール可能なページの長さにしています。（文字制限のため省略します）
    </div>
    <script src="js/animation.js"></script>
</body>

</html>

$(function(){ 
$(window).on('scroll', function (){

    var elem = $('.elem');
    
    elem.each(function () {
    
      var elemOffset = $(this).offset().top;
      var scrollPos = $(window).scrollTop();
      var wh = $(window).height();
  
      if(scrollPos > elemOffset - wh + (wh / 2)  ){
        //↓動かない
        $(this).animate({
            'color':'red'
        },1000);
        //↓動く
        // $(this).css('color','red');
      }
    });
  
  });
});