jsFiddle

• Run again
• Edit this fiddle

• JavaScript
• HTML
• CSS
• Result

// extend the NodeList class to create a
// a "plugin" for dojo.query()
dojo.extend(dojo.NodeList, {
    
    // plugin name
    animatePlaceholder: function() {
        dojo.forEach(this, function(obj, idx) {
            // get the span and connect a listener to it that will 
            // focus the input element (since the span is sitting
            // on top of the input)
            var s = dojo.query("span", obj).connect("onclick", function(event) {
                obj.getElementsByTagName('input')[0].focus();
            })[0];
            
            // cache the starting font size to use for later
            var sFontSize = parseInt(dojo.style(s, "fontSize"));
            
            // Firstly, we'll grab the input
            // Then, connect to the onkeydown to animate the placeholder exiting
            // stage left
            // Then, connect to the onblur to animate the placeholder entering
            // stage left if the input is empty
            dojo.query("input", obj).connect("onkeydown",  function(event){
                dojo.animateProperty({node:s, properties: {
                    fontSize: 0,
                    opacity: 0
                }}).play();
            }).connect("onblur", function(event) {
                if(dojo.trim(event.target.value).length == 0){
                    dojo.animateProperty({node:s, properties: {
                        fontSize: sFontSize,
                        opacity: 1
                    }}).play();  
                }
            });
            
        });
        return this; // Returning NodeList to continue chaining
    } 
}); // end of plugin

// use this to grab the animatePlaceholder elements on the page
// and apply the plugin
dojo.query(".animatePlaceholder").animatePlaceholder();

<!-- The structure here is predictable for the plugin code
     and thus should resemble the same for the implementation -->
<div class="animatePlaceholder">
    <span>Full Name</span>
    <input type="text" />
</div>


<div class="animatePlaceholder">
    <span>Email</span>
    <input type="text" />
</div>

.animatePlaceholder {
    position: relative;
    font-family: Arial, sans-serif;
}
.animatePlaceholder span {
    position: absolute;
    color: #bbb;
    margin: 5px 0 0 5px;
    cursor: text;
    font-size: 16px;
    line-height: 16px; /* [kgf] keep text v-centered as it resizes */
}
.animatePlaceholder input {
    font-size: 16px;
}