li要素にマウスが乗った時に背景色をフェードさせて変更させたく以下のコードを作成しましたが、アニメーションと色の変更が反映されません。なぜでしょうか。

$(document).ready(function(){
  
  $('li').hover(function(){
      $(this).css("cursor", "pointer").stop().animate({backgroundColor:"#000000"}, 800);
  });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>Hoge</title>
</head>
<body>

  <li>
    <p>hoge</p>
  </li>
</body>
</html>