jQuery hoverでのfadeIn fadeOut

progateのjQueryの道場で、.lessonにマウスをのせている時だけ.text-contentsを表示させる問題から質問です。
模範解答では一番下にコードを載せましたが、.text-contentsをdisplay:noneにして新たに設定したtext-activeクラスをdisplay:blockとしておき、scriptでhover時に対象の.text-contentsに.text-activeを追加する事で表示・非表示を切り替えています。

ここで疑問なのですがこの問題の場合、追加のクラスなどは設定せず

script
  $('.lesson').hover(
    function() {
      $(this).find('.text-contents').fadeIN();
  },
    function() {
      $(this).find('.text-contents').fadeOut();
    }
  );

のようにマウスを載せた時に、最初からfadeIn・fadeOutさせればいいのではないかと思いましたが、マウスをのせてもテキストが表示されず、上手くいきません。
模範解答の方法を使えば上手くいくことは理解しているのですが、この方法ではどこが問題なのか気になっていますので、教えていただけると幸いです。

html
<div class="lesson-wrapper">
  <div class="container">
      <div class="heading">
        <h2>Learn Where to Get Started!</h2>
      </div>
      <div class="lessons">
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/html.png">
            <p>HTML & CSS</p>
          </div>
          <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/jQuery.png">
            <p>jQuery</p>
          </div>
          <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/ruby.png">
            <p>Ruby</p>
          </div>
          <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/php.png">
            <p>PHP</p>
          </div>
          <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
        </div>
      </div>
    </div>
  </div>

css
.text-contents {
  margin: 3% auto;
  width: 80%;
  font-size: 12px;
  color: #b3aeb5;
  display: none;
}

.text-active {
  display: block;
}

script
$('.lesson').hover(
    function() {
      $(this).find('.text-contents').addClass('text-active');
    },
    function() {
      $(this).find('.text-contents').removeClass('text-active');
    }
  );