15023


`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]


CC BY-SA 3.0
2015-08-29T14:52:14.803
15012
2020-01-26T03:54:16.373
2020-01-26T03:54:16.373
32986
7232
question
javascript jquery css
li要素のマウスオーバー時に背景色を変えたい


`animate()`は`backgroundColor`のような数値型を取らないプロパティには対応していないようです。  
<http://semooh.jp/jquery/api/effects/animate/params%2C+%5Bduration%5D%2C+%5Beasing%5D%2C+%5Bcallback%5D/>

ググるといろいろ出てきますが、jQueryUIを入れるか、CSS3のtransitionアニメーションを使うのが主流みたいです。


CC BY-SA 3.0
2015-08-29T14:59:25.007
15013
2015-08-29T14:59:25.007
8532
15012
answer


たぶんcssでやるのが一番手っ取り早いと思います。あとはcitherさんの言っている通リです。

[code]

    $(document).ready(function(){
      $('li').hover(function(){
          $(this).css("cursor", "pointer").css("background-color", "black");
      });
    });
[/code]

[code]

    li {
        transition-property: background-color;
        transition-duration: 0.8s;
    }
[/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]


CC BY-SA 3.0
2015-08-29T18:11:52.333
15018
2015-08-29T18:11:52.333
10330
15012
answer


通常は [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]


CC BY-SA 3.0
2015-08-30T01:57:23.687
15023
2015-08-30T01:57:23.687
208
15012
answer