Monday 12 January 2015

Change color of html text with jquery animation


jquery

Here is a sample code of how to use jquery to change color of html text with animated feature. I have used one api link from GitHub, (https://raw.githubusercontent.com/jquery/jquery-color/master/jquery.color.js)  which actually is used to animate the text while changing color. You can use css instead of animate if you want to exclude animated feature then you also don't need to include the jquery.color.js. AngularJS is also used to populate combo list to fill with color to be used.



<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src= "https://raw.githubusercontent.com/jquery/jquery-color/master/jquery.color.js"></script>
<script>
myApp=angular.module('myApp',[])
.controller('myController',function($scope) {
    $scope.myTextColor = ['Red','Blue','Yellow','Green','Aqua','Purple','Gray','Fuchsia','Lime','Maroon','Navy','Olive','Silver','Teal'];
    $scope.changecolor = $scope.myTextColor[0];
});
$(document).ready(function() {
    $("#changecolor").change(function() {
        $("#header1").animate({color : $("#changecolor option:selected").text().toLowerCase()},1000);
    });
});
</script>
</head>
<body ng-controller="myController">
Select Text Color : <select id="changecolor" ng-model="changecolor" ng-options="option for option in myTextColor"></select>
<h1 id="header1">I am flexible to change my color anytime you want to. </h1>
</body>
</html>



Select Text Color :

I am flexible to change my color anytime you want to.

No comments: