jQuery UI

Animations

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<div id="animated" class="original">
    <p>Hi there</p>
</div>

CSS

#animated{    
    font-size:12px;
    text-align:center;
    width:100px;
    margin:0 auto;
    border-radius:5px;
}

.original{
    background-color:#ececec;
    border: 1px solid #ccc;
    color:#666;
}

.step1{
    color:#000;
    background-color:#f90;
}

.step2{
    color:#fff;
    background-color:red;
    
    /* won't work due to specificity. can use animate */
    width:100%;
}

JavaScript

$(function () {

    $("#animated")
        .position({
            my: "center",
            at: "center",
            of: document
        })
        .addClass("step1", 1000);/*
        .switchClass("step1", "step2", 1000)
        .animate({
            backgroundColor: "#f90"
        })
        .hide("explode", {
            pieces: 20
        })
        .show("drop", {
            direction: "down", 
            //easing: "easeInBounce"   
        })
        .effect("fold", {easing: "easeInQuad"});
        /**/
});