With jQuery’s animate function, you can animate all kinds of css-properties. What’s really missing from jQuery is animating colors. This plugin will add this feature. With this plugin, you can animate the following properties:
- color
- backgroundColor
- borderColor
- borderBottomColor
- borderLeftColor
- borderRightColor
- borderTopColor
- outlineColor
This plugin is based on Color Animations by John Resig. It fixes a major bug and also adds support for the borderColor-property.
This plugin also adds rgba-colors, so now you can animate the transparency of the background and foreground text independently. Beware that Internet Explorer 8 and earlier don’t support rgba-colors.
The easiest way is to use a content delivery network. Just paste the following code in your HTML just below jQuery.
<script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
<!DOCTYPE html>
<html>
<head>
<title>Jquery Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
<script>
$(function(){
$(".button4").click(function(){
$("p").animate({color: 'red', fontSize: '3em'},'slow').fadeOut("3000").fadeIn("3000");
})
})
</script>
<style type="text/css">
.div1{height: 80px; width: 80px; background-color: #98bf21; position: absolute;}
</style>
</head>
<body>
<button class="button4">Button</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div class="div1">Hello</div>
</body>
</html>
0 Comments