Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jquery background color animate

Suggested Videos
Part 98 - jQuery selectable filter
Part 99 - jQuery sortable widget
Part 100 - jQuery sortable from database

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.

jquery background color animate

<!DOCTYPE html>
<html xmlns="">
<head runat="server">
    <script src="jquery-1.11.2.js"></script>
    <script src="jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var toggleColor = false;

            $('#btnAnimate').click(function () {
                var divElement = $('#myDiv');
                if (toggleColor) {
                        'font-size': '15',
                        'border-width': '1',
                        'background-color': 'red',
                        'color': 'white',
                else {
                        'font-size': '20',
                        'border-width': '5',
                        'background-color': 'green',
                        'color': 'white',
                        'border-color': 'red'
                    }, 2000);

                toggleColor = !toggleColor;
<body style="font-family: Arial">
    <form id="form1" runat="server">
        <div id="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
            interviews. 100% placement assistance. 24 hours lab facility.
        <br />
        <input type="button" id="btnAnimate" value="Animate" />

jQuery tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.