
<div id="demo" class="yui3-module">
    <div class="yui3-hd">
        <h4>Animation Demo</h4>
        <a title="remove module" class="yui3-remove"><em>x</em></a>
    </div>
    <div class="yui3-bd">
        <p>This an example of what you can do with the YUI Animation Utility.</p>
        <p><em>Follow the instructions above to see the animation in action.</em></p>
    </div>
</div>
<p>This is placeholder text used to demonstrate how the above animation affects subsequent content.</p>

<script type="text/javascript">
YUI().use('anim', function(Y) {
    var anim = new Y.Anim({
        node: '#demo',
        to: { opacity: 0 }
    });

    var onEnd = function() {
        this.setAttrs({
            to: { height: 1 },
            easing: Y.Easing.bounceOut
        });
        this.run();
    };

    anim.once('end', onEnd);

    Y.one('#demo .yui3-remove').on('click', anim.run, anim);

});
</script>
