Zoiets:
window.addEvent ('domready', function () {
var box = $('box'), log = $('log');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
$('start').addEvent('click', function() {
log.setHTML('starting...');
fx.start({
'width': 300,
'height': 210
}).chain(function(){
// executes immediately after completion of above effect
log.setHTML('First effect completed (1/5)');
this.start({
'opacity': .3
});
}).chain(function() {
// executes 5 seconds after completion of above effect
log.setHTML('Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
this.start.delay(5000, this, {
'opacity': 1
});
}).chain(function() {
// executes 2 seconds after completion of above effect
log.setHTML('Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
'background-color': '#89c577'
});
}).chain(function() {
// executes 1 seconds after completion of above effect
log.setHTML('Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
this.start.delay(1000, this, {
'background-color': '#4f8096',
'width': 100,
'height': 70
});
}).chain(function() {
// executes immediately after completion of above effect
log.setHTML('Fifth effect completed (5/5).');
});
});
});
window.addEvent('domready', function() {
// HERE IS WHAT YOU READ IN JS CODE
});
Het kan ook nog zo, dan hoeven ze niet eens op die link te klikken:
window.addEvent ('domready', function () {
var box = $('box'), log = $('log');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
log.setHTML('starting...');
fx.start({
'width': 300,
'height': 210
}).chain(function(){
// executes immediately after completion of above effect
log.setHTML('First effect completed (1/5)');
this.start({
'opacity': .3
});
}).chain(function() {
// executes 5 seconds after completion of above effect
log.setHTML('Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
this.start.delay(5000, this, {
'opacity': 1
});
}).chain(function() {
// executes 2 seconds after completion of above effect
log.setHTML('Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
'background-color': '#89c577'
});
}).chain(function() {
// executes 1 seconds after completion of above effect
log.setHTML('Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
this.start.delay(1000, this, {
'background-color': '#4f8096',
'width': 100,
'height': 70
});
}).chain(function() {
// executes immediately after completion of above effect
log.setHTML('Fifth effect completed (5/5).');
});
});
Mm nu gebeurt er helemaal niets heb nu:
Js:
window.addEvent ('domready', function () {
var box = $('box'), log = $('log');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
$('start').addEvent('click', function() {
log.setHTML('starting...');
fx.start({
'width': 300,
'height': 210
}).chain(function(){
// executes immediately after completion of above effect
log.setHTML('First effect completed (1/5)');
this.start({
'opacity': .3
});
}).chain(function() {
// executes 5 seconds after completion of above effect
log.setHTML('Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
this.start.delay(5000, this, {
'opacity': 1
});
}).chain(function() {
// executes 2 seconds after completion of above effect
log.setHTML('Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
'background-color': '#89c577'
});
}).chain(function() {
// executes 1 seconds after completion of above effect
log.setHTML('Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
this.start.delay(1000, this, {
'background-color': '#4f8096',
'width': 100,
'height': 70
});
}).chain(function() {
// executes immediately after completion of above effect
log.setHTML('Fifth effect completed (5/5).');
});
});
});
Html:
<h3>Chaining</h3>
<p>Click <a id="start" href="#" name="start">start</a> to see a sequence of effects controlled by chain</p>
<p><strong>Log:</strong> <span id="log">waiting for start click</span></p>
<div id="box"></div>
Je moet het click event dan wel weglaten.
edit: Zie 2de reactie jan
Of mijn tweede voorbeeld gebruiken.
Dit is al mijn code en er gebeurt nog steeds niets...
Js:
window.addEvent ('domready', function () {
var box = $('box'), log = $('log');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
log.setHTML('starting...');
fx.start({
'width': 300,
'height': 210
}).chain(function(){
// executes immediately after completion of above effect
log.setHTML('First effect completed (1/5)');
this.start({
'opacity': .3
});
}).chain(function() {
// executes 5 seconds after completion of above effect
log.setHTML('Second effect completed (2/5).<br />Waiting 5 seconds before starting third.');
this.start.delay(5000, this, {
'opacity': 1
});
}).chain(function() {
// executes 2 seconds after completion of above effect
log.setHTML('Third effect completed (3/5).<br />Waiting 2 seconds before starting fourth.');
this.start.delay(2000, this, {
'background-color': '#89c577'
});
}).chain(function() {
// executes 1 seconds after completion of above effect
log.setHTML('Fourth effect completed (4/5).<br />Waiting 1 second before starting fifth.');
this.start.delay(1000, this, {
'background-color': '#4f8096',
'width': 100,
'height': 70
});
}).chain(function() {
// executes immediately after completion of above effect
log.setHTML('Fifth effect completed (5/5).');
});
});
Html:
<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript" src="mootools.js"></script>
<style type="text/css" src="demo.css"></style>
<h3>Chaining</h3>
<p><strong>Log:</strong> <span id="log">waiting for start click</span></p>
<div id="box"></div>
Css:
h3.section {
margin-top: 1em;
}
#vertical_slide, #horizontal_slide {
background: #D0C8C8;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
}
div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}
In het mapje staan de volgende bestanden: demo.css, demo.js, index.html, mootools.js
Draai regel 44 en 45 om... Je hebt de mootools functies nodig voordat je je eigen JS begint
