MooShell

• Run
• Edit

• JavaScript
• HTML
• CSS
• Result

new Fx.Morph("hoge").start({
    color: "#00ff00",
    fontSize: "12px"
}).chain(
    function(){
        this.start({
            opacity:0,
            borderColor:"#ffffff"
        });
    },
    function(){
        this.start({
            opacity:1,
            color:"#0000ff",
            backgroundColor:"#ffdddd",
            borderColor:"#cccccc"
        });
    },
    function(){
        this.start({
            marginTop:20,
            marginLeft:50,
            backgroundColor:"#ffeeee"
        });
    },
    function(){
        this.start({
            opacity:0
        });
    },
    function(){
        $('hoge').set('text',"Finish");
        this.start({
            opacity:1,
            fontSize:20,
            color:"#cccccc",
            letterSpacing:10,
            borderWidth:3,
            backgroundColor:"#eeeeff"
        });
    }
);

<div id="hoge">
    This is a Test.
</div>

#hoge{
    color:#f00;
    width:200px;
    padding:10px;
    border:1px solid #cccccc;
    background:#fefefe;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    text-align:center;
}