emile
Version:
no-thrills stand-alone CSS animation JavaScript framework
143 lines (126 loc) • 3.14 kB
HTML
<html lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>ender.js examples</title>
<style type="text/css">
body {
font-family: 'helvetica neue', helvetica, arial;
font-weight: 300;
}
#doc {
width: 750px;
margin: 0 auto;
position: relative;
}
h1 {
font-weight: 100;
font-size: 50px;
display: inline-block;
}
</style>
<script src="ender.js"></script>
<script type="text/javascript">
$.domReady(function () {
$.ender({
color: function (c) {
return this.css('color', c);
}
}, true);
$('h1').hover(
function () {
$('h1').append('<span class="chekr">✓</span>');
},
function () {
$('span.chekr').remove()
}
);
$('#woo').css({
position: 'absolute',
right: 0,
top: '100px',
opacity: 0,
width: '1px',
height: '4px',
backgroundColor: 'green'
})
.bind('click', function () {
alert('you click me...');
})
.animate({
right: 384,
backgroundColor: '#ff0000',
opacity: 1,
width: $('h1').offset().width,
duration: 1000
}, function () {
$('#woo').animate({
backgroundColor: '#66cd00',
duration: 5000
});
});
var F = $.klass(function () {
this.o = '';
})
.methods({
get: function () {
return this.o
},
set: function (v) {
this.o = v;
return this;
}
});
$('#doc p').html((new F()).set('Where battles are won').get()).color('gray')
$.script('./fixture.js', function () {
$('p').append(' ✓');
});
$('p').bind('click', function () {
$(this).css('color', 'red');
});
// go click the p tag - it turns red
$('p').unbind('click');
// create a new listener (clicking p will turn green)
$('p').bind('click', function () { $(this).css('color', 'green'); });
});
</script>
</head>
<body>
<div id="doc">
<h1>Ender.js examples</h1>
<p> </p>
<div id="woo"></div>
<pre><code>
$('#woo').css({
position: 'absolute',
right: 0,
top: '100px',
opacity: 0,
width: '1px',
height: '4px',
backgroundColor: 'green'
})
.animate({
right: 384,
"background-color": '#ff0000',
opacity: 1,
width: $('h1').offset().width,
duration: 1000
});
var F = $.klass(function () {
this.o = '';
})
.methods({
get: function () {
return this.o
},
set: function (v) {
this.o = v;
return this;
}
});
$('#doc p').color('grey').html((new F()).set('Where battles are won').get());
</code></pre>
</div>
</body>
</html>