Minified - Getting Started

by tjansen

HTML

<script src="http://minifiedjs.com/download/minified-src.js"></script>
Click on the buttons to move the square:<br/>
<button id="moveButton">Move</button> 
<button id="resetButton">Reset</button> 
    
<div id="container">
    <div id="block"></div>
</div>

CSS

body { font-family: sans-serif; }
#container { position: relative; width: 180px; height: 180px; border: 1px solid black; margin-top: 1em;}
#block { position: absolute; background-color: black; top: 10px; left: 10px; width: 30px; height: 30px; }

JavaScript

var MINI = require('minified'); 
var $ = MINI.$, $$ = MINI.$$, EE = MINI.EE;

$(function() {
    $('#moveButton').onClick(function() {
        $('#block').animate({$left: Math.random()*150 + 'px', $top: Math.random()*150 + 'px'}, 500);
    });

    $('#resetButton').onClick(function() {
        $('#block').set({$left: '10px', $top: '10px'});
    });
});