69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney<div id="demo">
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <a href="#">x</a>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney</div>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney<script type="text/javascript">
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt SweeneyYUI().use('transition', function(Y) {
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney var node = Y.one('#demo');
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney node.one('a').on('click', function(e) {
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney e.preventDefault();
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney node.transition({
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 1, // seconds
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney easing: 'ease-out', // CSS syntax
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney height: 0,
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney top: '100px',
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney width: {
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney delay: 1,
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 0.75,
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney easing: 'ease-in',
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney value: 0
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney },
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney left: {
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney delay: 1,
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 0.75,
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney easing: 'ease-in',
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney value: '150px'
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney },
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney opacity: {
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney delay: 1.5,
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 0.75,
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney value: 0
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney }
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney }, function() {
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney node.remove();
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney });
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney });
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney});
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney</script>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney</body>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney</html>