javascript - 画像の MouseEnter と MouseLeave

Question

以前にこの質問を見たことがありますが、これまでに見た解決策はどれもうまくいきませんでした。

ホバーしたときに画像をフェードインし、そうでないときにフェードアウトするように単純にしようとしています。以下は、私の HTML のスニペットです。

<script type="text/javascript" src="js/tabs.js"></script>

<ul>
  <li>
    <a href="#jenn">
      <img class="img-fade" src="img/team/jenn.jpg" alt="Jenn">Jenn
    </a>
  </li>
</ul>

.img-fade を opacity: 0.5; に設定する CSS があります。

次に、私の tab.js ファイルは次のようになります。

$(document).ready(function() {
   $('.img-fade').mouseenter(function() {
      $('.img-fade').fadeTo('fast',1);
   });
   $('.img-fade').mouseleave(function() {
      $('.img-fade').fadeTo('fast',0.5);
   });
});

なぜこれが機能しないのかわかりません。それは十分に単純に思えます。どんな助けでも大歓迎です。ありがとう！