Minified - Toggle

by tjansen

HTML

<script src="http://minifiedjs.com/download/minified-src.js"></script>
<div id="container">
    <div id="block"></div>
</div>
<button id="posButton">Toggle Position</button>
<button id="pos0Button">Position 0</button>
<button id="pos1Button">Position 1</button>
<br/>
<button id="styleButton">Toggle Style</button>
<button id="style0Button">Style 0</button>
<button id="style1Button">Style 1</button>

CSS

#container { position: relative; width: 300px; height: 300px; border: 1px solid black; }
#block { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; background-color: #000; }

JavaScript

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

$(function() {
    var posToggle = $('#block').toggle({$top: '10px', $left: '10px'}, 
                                       {$top: '240px', $left: '240px'}, 800);
    var styleToggle = $('#block').toggle({$backgroundColor: '#000', $width: '30px', $height: '30px'}, 
                                       {$backgroundColor: '#f80', $width: '60px', $height: '60px'}, 500);
    
    $('#posButton').on('click', posToggle);
    $('#pos0Button').on('click', posToggle, [false]);
    $('#pos1Button').on('click', posToggle, [true]);

    $('#styleButton').on('click', styleToggle);
    $('#style0Button').on('click', styleToggle, [false]);
    $('#style1Button').on('click', styleToggle, [true]);
});