li要素のマウスオーバー時に背景色を変えたい


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

[code]

    $(document).ready(function(){
      
      $('li').hover(function(){
          $(this).css("cursor", "pointer").stop().animate({backgroundColor:"#000000"}, 800);
      });
    });
[/code]

[code]

    <!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>
[/code]




通常は [CSSの `transition`](http://caniuse.com/#feat=css-transitions) を使います。

仮に、要素からマウスを外した時に背景色を戻して良いのなら、もはやJavaScriptは (もちろんjQueryも) 一切不要です。

以下の例を試してみてください。

[code]

    .target li {
      transition: background-color 2s;
    }
    
    .target li:hover {
      background-color: #0f0;
      transition: background-color 800ms;
    }
[/code]

[code]

    <ul class="target">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
    </ul>
[/code]




通常は [CSSの `transition`](http://caniuse.com/#feat=css-transitions) を使います。

仮に、要素からマウスを外した時に背景色を戻して良いのなら、もはやJavaScriptは (もちろんjQueryも) 一切不要です。

以下の例を試してみてください。

[code]

    .target li {
      transition: background-color 2s;
    }
    
    .target li:hover {
      background-color: #0f0;
      transition: background-color 800ms;
    }
[/code]

[code]

    <ul class="target">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
    </ul>
[/code]

