Minified JavaScript example - moving a block
sample code at jsfiddle:
http://jsfiddle.net/tjansen/tqsCg/
tags: #javascript #editor #framework
http://minifiedjs.com
showintro=no
code=yes
html
------
Click on the buttons to move the square:Move
Reset
javascript
-------------
var MINI = require('minified');
var $ = MINI.$, $$ = MINI.$$, EE = MINI.EE;
$(function() {
$('#moveButton').on('click', function() {
$('#block').animate({$left: 50 + 'px', $top: 0 + 'px'}, 500);
$('#rblock').set({$background: 'grey'} );
$('#rblock textarea').set({$color: 'grey'} );
$('#rblock textarea').set({$background: 'lightgrey'} );
});
$('#resetButton').on('click', function() {
$('#block').animate({$left: '0px', $top: '0px'}, 500 );
$('#rblock').set({$background: 'blue'} );
$('#rblock textarea').set({$color: 'red'} );
$('#rblock textarea').set({$background: 'white'} );
});
});
css
-----
body { font-family: sans-serif; }
#container { position: relative; width: 180px; height: 180px; border: 1px solid black; margin-top: 1em;}
#block { float: left; position:absolute; background-color: green; margin-left: 1%; width: 80px; height: 100px; }
body { font-family: sans-serif; }
#rblock { float: right; background-color: blue; margin-right: 1%; width: 80px; height: 100px;}
#rblock textarea {color: red;}