7

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>

3 件の回答 3

5

通常は CSSの transition を使います。

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

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

.target li {
  transition: background-color 2s;
}

.target li:hover {
  background-color: #0f0;
  transition: background-color 800ms;
}
<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>

2

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

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

2

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

$(document).ready(function(){
  $('li').hover(function(){
      $(this).css("cursor", "pointer").css("background-color", "black");
  });
});
li {
    transition-property: background-color;
    transition-duration: 0.8s;
}
<!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>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。