<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>