But all is not lost! There is a plugin, appropriately named jQuery Color, which adds the color animation feature. It is trivial to use and extremely small to download.
To start using it, just download the .js file from their GitHub page. I am using the minified version. Include it in your page after jQuery. Then, just animate colors the same way you would animate other CSS properties and it will magically work!
In the following example, the page starts out containing a DIV with a black background. As soon as jQuery is ready, an animation changes the background color to purple over a span of 10 seconds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Color Animation</title>
</head>
<body>
<div id="test-div" style="width: 500px; height: 300px; background-color: #000000;"></div>
</body>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<script>
$(function() {
$('#test-div').animate({backgroundColor: '#FF00FF'}, 10000);
});
</script>
</html>
It doesn't get much easier than that! But what comic prompted me to use this? It's not for today's. You'll just have to wait to find out (or look in the repository on GitHub).
 |
| Amphibian.com comic for 26 October 2015 |
No comments:
Post a Comment