Question

我有li元素：

<ul>
  <li><a href="">test 1</a></li>
  <li><a href="">test 2</a></li>
</ul>

我希望在悬停时为底色上的颜色设置动画颜色。

怎么做？

Answer 1

您需要使用此jQuery PlugIn才能为颜色提供animate（）功能！

示例用法（从github页面复制！）

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      background-color:#bada55;
      width:100px;
      border:1px solid green;
    }
  </style>
  <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  <script src="jquery.color.min.js"></script>
</head>
<body>
  <button id="go">Simple</button>
  <button id="sat">Desaturate</button>
  <div id="block">Hello!</div>
  <script>
    $("#go").click(function(){
      $("#block").animate({
        backgroundColor: "#abcdef"
      }, 1500 );
    });

    $("#sat").click(function(){
      $("#block").animate({
        backgroundColor: $.Color({ saturation: 0 })
      }, 1500 );
    });
  </script>
</body>
</html>

如何动画颜色？

1 个答案: