|
Color Animation
Color animation is used animate colors of an element. Color animation should be associated with a "prop" parameter which denotes which color style has be animated. Eg "background-color", "border-color", "color".
Colors can be represented by 6/3 char hex value like #FF00FF or #F0F or it can be represented in RGB array like [255, 0, 255]
{
to : "#ff0000",
anim : "Color.smooth",
duration : 2000,
prop : "background-color"
}
Example 1 - Animate background color from red to green and return
JS
HTML
CSS
$.domLoaded(function() {
$.get("#ani").on("click", function() {
// Change background color
$.get("#box1").animate({
to : "#0f0",
anim : "Color.smooth.return",
prop : "background-color",
duration : 3000
});
});
});
Result
Example 2 - Animate border color from black to red
JS
HTML
CSS
$.domLoaded(function() {
$.get("#ani").on("click", function() {
// Change border color
$.get("#box1").animate({
to : "#f00",
anim : "Color.smooth",
prop : "border-color",
duration : 1000
});
});
});
Result
Example 3 - Change text color to blue
JS
HTML
CSS
$.domLoaded(function() {
$.get("#ani").on("click", function() {
// Change text color
$.get("#box1").animate({
to : "#00f",
anim : "Color.smooth",
prop : "color",
duration : 2000
});
});
});
Result
| |
|
|