jQuery UI & Effects: Color Animation

jQuery UI Effects – Animate demo

Toggling and changing of colors.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - Animate demo</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .toggler {
            width: 500px;
            height: 200px;
            position: relative;
        }

        #button {
            padding: .5em 1em;
            text-decoration: none;
        }

        #effect {
            width: 240px;
            height: 135px;
            padding: 0.4em;
            position: relative;
            background: #fff;
        }

        #effect h3 {
            margin: 0;
            padding: 0.4em;
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            var state = true;
            $('#button').click(function () {
                if (state) {
                    $('#effect').animate({
                        backgroundColor: '#aa0000',
                        color: '#fff',
                        width: 500
                    }, 1000);
                } else {
                    $('#effect').animate({
                        backgroundColor: '#fff',
                        color: '#000',
                        width: 240
                    }, 1000);
                }
                state = !state;
            });
        });
    </script>
</head>
<body>

<div class='toggler'>
    <div id='effect' class='ui-widget-content ui-corner-all'>
        <h3 class='ui-widget-header ui-corner-all'>Animate</h3>

        <p>
            I am changing color and please ignore me my friend.
        </p>
    </div>
</div>

<a href='#' id='button' class='ui-state-default ui-corner-all'>Toggle Effect</a>


</body>
</html>
Try The Code

Clicking on the Toggle Effect button will change the background color of the div box with id=’effect’ to #aa0000.

Series Navigation<< jQuery UI & Effects: Toggle class
jQuery UI & Effects: Toggle >>