e4dfb763224a6c8b83b3e94ba543a894d2b355cbMark Andrews<div id="demo" class="yui3-module">

e4dfb763224a6c8b83b3e94ba543a894d2b355cbMark Andrews <div class="yui3-hd">

bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews <h3>Animation Demo</h3>

bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews </div>

bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews <div class="yui3-bd">

bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews <p>This an example of what you can do with the YUI Animation Utility.</p>

bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews <p><em>Follow the instructions above to see the animation in action.</em></p>

bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews </div>

bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews</div>

bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews<p>This is placeholder text used to demonstrate how the above animation affects subsequent content.</p>

bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews

bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews<script type="text/javascript">

bf8267aa453e5d2a735ed732a043b77a0b355b20Mark AndrewsYUI().use('anim', function(Y) {

bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews var module = Y.one('#demo');

bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews

e4dfb763224a6c8b83b3e94ba543a894d2b355cbMark Andrews // add fx plugin to module body

ea94d370123a5892f6c47a97f21d1b28d44bb168Tinderbox User var content = module.one('.yui3-bd').plug(Y.Plugin.NodeFX, {

e4dfb763224a6c8b83b3e94ba543a894d2b355cbMark Andrews from: { height: 1 },

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews to: {

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews height: function(node) { // dynamic in case of change

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews return node.get('scrollHeight'); // get expanded height (offsetHeight may be zero)

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews }

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews },

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews easing: Y.Easing.easeOut,

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews duration: 0.5

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews });

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews var onClick = function(e) {

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews module.toggleClass('yui3-closed');

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews content.fx.set('reverse', !content.fx.get('reverse')); // toggle reverse

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews content.fx.run();

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews };

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews // use dynamic control for dynamic behavior

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews var control = Y.Node.create(

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews '<a title="show/hide content" class="yui3-toggle">' +

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews '<em>toggle</em>' +

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews '</a>'

6487bd1788fece0ef66fc6867ce37ae50b228b89Mark Andrews );

// append dynamic control to header section

module.one('.yui3-hd').appendChild(control);

control.on('click', onClick);

});

</script>