jquery background color animate

In this video we will discuss animating colors using jquery. With the basic jQuery functionality, animate() method cannot animate non-numeric style properties like color, background-color, and border-color.

jQuery UI adds the ability to animate color properties. In the example below a reference to jQuery UI is included, hence the color animations work. If we remove the reference, color animations will not work, but other numeric style properties (font-size, border-width) continue to work.

<!DOCTYPEhtml>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title></title>

<scriptsrc="jquery-1.11.2.js"></script>

<scriptsrc="jquery-ui.js"></script>

<scripttype="text/javascript">

$(document).ready(function () {

var toggleColor = false;

$('#btnAnimate').click(function () {

var divElement = $('#myDiv');

if (toggleColor) {

divElement.animate({

'font-size': '15',

'border-width': '1',

'background-color': 'red',

'color': 'white',

'border-color':'green'

},2000);

}

else {

divElement.animate({

'font-size': '20',

'border-width': '5',

'background-color': 'green',

'color': 'white',

'border-color': 'red'

}, 2000);

}

toggleColor = !toggleColor;

});

});

</script>

</head>

<bodystyle="font-family:
Arial">

<formid="form1"runat="server">

<divid="myDiv"style="width: 500px; border: 1px solid black;

padding: 5px; font-size: 15px">

At Pragim Technologies, training is
delivered by real time software experts

having more than 10 years of experience.
Interview questions and real time

scenarios discussion on topics
covered for the day. Realtime projects

discussion relating to the possible
interview questions. Trainees can attend

training and use lab untill you get
a job. Resume preperation and mock up