XUIjs with MOVEjs

XUIjs and MOVEjs project

by James Doyle

HTML

<script src="http://visionmedia.github.com/move.js/move.min.js"></script>
<script src="http://xuijs.com/downloads/xui-2.3.2.min.js"></script>
<button type="button">Click Me</button>

<div id="box"><p>Hey there guyara. You smell like the aids.</p></div>

CSS

#box {
    margin: 10px 0px;
    height: 90px;
    width: 160px;
    background: #ff0;
    -webkit-backface-visibility: hidden;
    -webkit-transform:translate3d(0,0,0);
}

JavaScript

x$('button').click(function() {
    x$('body').setStyle('background', 'black');
    move('#box').set('background-color', 'red').rotate(180).duration('1s').end(function() {
        move('#box').set('background-color', 'blue').add('margin-left', 100).set('opacity', 0).end(function() {
            x$('#box').setStyle('display', 'none');
        });
    });
});