WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

色をアニメーションさせることができるjQueryプラグインjQuery Color

github.com

デモ
http://efu.sakura.ne.jp/web/hover/

jQueryのanimateは数値の値しかアニメーションさせることができない。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>hover</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul class="hover">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="jquery.color.js"></script>
  <script src="script.js"></script>
</body>
</html>
@charset "utf-8";

body {
  background: #000;
}

.hover li {
  width: 100%;
  height: 20px;
  cursor: pointer;
}
$(function(){
  $(".hover li").on('mouseenter', function(){
    $(this).css({"background-color":"#d3e4fd"}).animate({"background-color":"#000000"}, 1000);
  });
});