CODEWITHSUNDEEP
jquery
Nips
Nips

Reputation: 13890

How to animate color?

I have li elements:

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

and I want to animate color on hover that a new color comes from the bottom.

How to do it?

Upvotes: 0

Views: 134

Answers (1)

thomas
thomas

Reputation: 2578

You need to make use of this jQuery PlugIn in order to provide animate() capabilities to colors!

Example Usage (copied from github page!)

<!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>

Upvotes: 1

Related Questions