jQuery hoverでのfadeIn fadeOut

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

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

script
1  $('.lesson').hover(
2    function() {
3      $(this).find('.text-contents').fadeIN();
4  },
5    function() {
6      $(this).find('.text-contents').fadeOut();
7    }
8  );

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

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

css
1.text-contents {
2  margin: 3% auto;
3  width: 80%;
4  font-size: 12px;
5  color: #b3aeb5;
6  display: none;
7}
8
9.text-active {
10  display: block;
11}

script
1$('.lesson').hover(
2    function() {
3      $(this).find('.text-contents').addClass('text-active');
4    },
5    function() {
6      $(this).find('.text-contents').removeClass('text-active');
7    }
8  );