Test jQuery UI (animate background)

This example is modified from http://jqueryui.com/demos/animate/#default

by Johnny Lee

HTML

<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>
<div class="toggler">
    <div id="effect">
        <h3>Animate</h3>
        <p>
            本來是不打算寫任何關於 jQuery 的入門文章了, 因為這種資訊在網路上俯拾皆是, 甚至都泛濫了。然而在實際使用時, 發現 jQuery 的精簡語法在彼此之間也實在太相像了, 如果不自己做個筆記以供隨時速查, 總是記不住。所以, 還是寫個一篇或是幾篇拿來放著, 想查閱的時候也方便。
        </p>
    </div>
</div>
<div>
    <a href="#" id="button">Toggle Effect</a></div>

CSS

body {
    font-family: Verdana, 微軟正黑體, Arial; 
    font-size: .8em; }
.toggler { 
    width: 500px; 
    height: 180px; 
    margin: .5em;
    position: relative; }
#button { 
    border: 1px solid #CCC;
    color: #1C94C4;
    background: #F6F6F6;
    font-weight: bold;
    margin: .5em;
    padding: .5em 1em; 
    -webkit-border-radius: 4px;
    border-radius: 4px;
    text-decoration: none; }
#effect { 
    border: 1px solid #ddd; 
    -webkit-border-radius: 4px;
    border-radius: 4px;
    width: 240px; 
    height: 150px; 
    padding: 0.4em; 
    position: relative; 
    color: #000;
    background: #ddd; }
#effect h3 { 
    border: 1px solid #E78F08;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: gold; /* #F6A828; */
    color: blue;
    font-weight: bold;
    margin: 0; 
    padding: 0.4em; 
    text-align: center; }

JavaScript

$(function() {
        $( "#button" ).toggle(
            function() {
                $( "#effect" ).animate({
                    backgroundColor: "#444444",
                    color: "#fff",
                    width: 500,
                    height: 100
                }, 'fast' );
            },
            function() {
                $( "#effect" ).animate({
                    backgroundColor: "#ddd",
                    color: "#000",
                    width: 240,
                    height: 150
                }, 'fast' );
            }
        );
    });