This week we are going to keep moving forward with our look at using MooTools to make our pages have some nice, fancy effects. The last few posts we looked at how easy it is with MooTools to animate different CSS properties. We are going to expand on that this post and for next weeks post all the effects will culminate in a gorgous menu.
First up: effect chaining. What is effect chaining you ask. Effect chaining allows you to chain together 2 or more effects so that as soon as the first effect completes the second effect begins. You can chain as many together as you want. In the example below, we will chain together six effects. We will move right, then left, then further right, then left, then further right again then back to our start position;
Click Me to See Some Chaining
window.addEvent('domready', function() {
myTween = new Fx.Tween('moveMe', 'marginLeft', { link: 'chain' });
$('clickMe1').addEvent('click', function(e) {
myTween.start(100).start(50).start(150).start(100).start(200).start(0);
e.stop();
});
});
Next up is a really simple effect that you see all over the place on the web. What we are going to do is animate the background color of an element from any color back to its original color. This is a great method to draw attention to items that may have changed.
Change Somethingwindow.addEvent('domready', function() {
$('clickMe2').addEvent('click', function(e) {
$('highlightMe').highlight('#ff9900');
e.stop();
});
});
Last but certainly not least is the absolutely important task of knowing when your animation is complete. When you are moving stuff all over the place you dont want to trigger events too early. MooTools javascript library allows you to easily trigger an event when an effect is done. Below, we will trigger the onComplete event when the animation is done. Once it finishes, we will pop up an alert box and then move back to our starting location.
Show Me the Goodswindow.addEvent('domready', function() {
$('click3').addEvent('click', function(e) {
$('doneMe').set('tween', {
onComplete: function(e) {
$(e.id).set('tween', { onComplete: Class.empty });
alert('All done. I\'m going to go back home now');
$(e.id).tween('marginLeft', 0);
}
});
$('doneMe').tween('marginLeft', '400');
e.stop();
});
});
First off all, Thanks for your help.
One thing that I don’t understand is, what is this line of code use for?
e.stop();
How come you didn’t include it in ‘mouseenter’, ‘mouseleave’ event in your Part-4 series.
I’ve try to exclude it, it works fine. How do i decide between include it or exclude it?
Can you explain a little bit more about onComplete: function(e) {}
Why this two lines of codes, didn’t get executed again after oncomplete?
$(‘doneMe’).tween(‘marginLeft’, ‘400′);
e.stop();
Cause i don’t see a return statement inside oncomplete function
The prgoram flow will continue to this 2 last lines of codes, I think?
Thanx again
e.stop() is used to prevent the normal click event from occurring. This keeps browsers from following the link if you use it on an anchor tag. You can also return false from the function and get the same result. It is good practice to use e.stop() whenever you put a click handler on an anchor tag. It isn’t necessary to use e.stop() on mouseenter or mouseleave because the browser won’t be trying to follow a link. In the examples here, I didn’t fill the href=”" part of the tag so it won’t have any effect. Try filling the href with http://www.google.com with and without e.stop() and you will see.
What is happening in the onComplete handler handler for the tween is this line: $(e.id).set(‘tween’, { onComplete: Class.empty }); That is resetting the onComplete handler to Class.empty which is just an empty function. Resetting the onComplete handler keeps it from firing the second time when the margin is reset to 0.
Hi there,
Hi tryed something like this but it don’t seems to work for me:
$(‘close-slider’).addEvent(‘click’, function(e) {
slider.set(’slideOut’, {
onComplete: function(e) {
$(‘ficheholder’).setStyle(‘visibility’, ‘hidden’);
}
});
slider.slideOut();
e.stop();
});
thanks for all
I’ not really sure what you are trying to do here. You reference ’slider’ in your code twice but it isn’t apparent what ’slider’ is.
I’m having trouble with calling the function twice via links. Using the example from above:
window.addEvent(‘domready’, function() {
myTween = new Fx.Tween(‘moveMe’, ‘marginLeft’, { link: ‘chain’ });
$(‘click1′).addEvent(‘click’, function(e) {
myTween.start(100).start(50).start(150).start(100).start(200).start(0);
e.stop();
});
});
….
[a] href=”#” rel=”nofollow”>Click Me to See Some Chaining[a]
[a] href=”#” rel=”nofollow”>Click Me to See Some Chaining Again[a]
The second link does not work. What gives? Do I have to make a unique ID for each link I use to call the function? as in:
window.addEvent(‘domready’, function() {
myTween = new Fx.Tween(‘moveMe’, ‘marginLeft’, { link: ‘chain’ });
$(‘click1a’).addEvent(‘click’, function(e) {
myTween.start(100).start(50).start(150).start(100).start(200).start(0);
e.stop();
});
$(‘click1b’).addEvent(‘click’, function(e) {
myTween.start(100).start(50).start(150).start(100).start(200).start(0);
e.stop();
});
});
….
[a] href=”#” rel=”nofollow”>Click Me to See Some Chaining[a]
[a] href=”#” rel=”nofollow”>Click Me to See Some Chaining Again[a]
Seems weird…
You will need to do the latter. Each link will need its own separate id. You could also just use a class and do something like this:
$$(‘a.someClass’).addEvent(‘click’, function(e) {
myTween.start(100).start(50).start(150).start(100).start(200).start(0);
e.stop();
});
That would work for any links with the class ’someClass’ on them.
the chain example from this page is not working, is there something i’m missing? thanks for the tutorials
All fixed. Wordpress added some code into my javascript.
thanks looking good!
question… in the chaining example is it possible to chain other effects such as a fade effect, a move effect, a width effect… let me give it a try
@george, the chaining example will only allow you to chain the tween that you created: in this case, margin-left. You can chain together multiple tweens by using the complete handler from the first tween to start the next.
Mike
thanks, yeah that’s what i found out, only multiple tweens of one effect… on the oncomplete example it lets you combine two effects… but im trying to get it to do more… for example one effect triggers another effect on oncomplete and so on… still pretty nice… learning so much just from these examples… thanks…
cool!… i got it… took some logic thinking… but here it is… it plays one effect, whtever it is, then another whatever it is, then another, etc… and etc…
window.addEvent(‘domready’, function() { // gets the script/dom ready
$(‘click3′).addEvent(‘click’, function(e) { // adds click event
$(‘container’).set(‘tween’, {
onComplete: function(e) {
$(e.id).set(‘tween’, { onComplete: Class.empty }); //clses first effect
$(‘container’).set(‘tween’, {
onComplete: function(e) {
$(e.id).set(‘tween’, { onComplete: Class.empty }); //closes 2nd effect
$(e.id).tween(‘opacity’, .4); // 3rd effect using opacity
}
});
$(e.id).tween(‘height’, 600); // 2nd effect with height
}
});
$(‘container’).tween(‘width’,400); // 1st main effect using width
e.stop();
});
});
once again thank you for your tutorials… ill upload my demo when i get a chance…
cool… i got it… some logic and t/e and here it is… thanks so much i’ll upload a demo when i get a chance
add all the effects you want…etc…
window.addEvent(‘domready’, function() { // gets the script/dom ready
$(‘click3′).addEvent(‘click’, function(e) { // adds click event
$(‘container’).set(‘tween’, {
onComplete: function(e) {
$(e.id).set(‘tween’, { onComplete: Class.empty }); //clses first effect
$(‘container’).set(‘tween’, {
onComplete: function(e) {
$(e.id).set(‘tween’, { onComplete: Class.empty }); //closes 2nd effect
$(e.id).tween(‘opacity’, .4); // 3rd effect using opacity
}
});
$(e.id).tween(‘height’, 600); // 2nd effect with height
}
});
$(‘container’).tween(‘width’,400); // 1st main effect using width
e.stop();
});
});
check out my demo, ic reated using your examples… using the morph, the fade, and the highlight
http://www.gurroladesign.com/mootool/launch_sequence_complete_fade2.html
its a fictional missile launcher, based on some movie i saw… wher the lead is trying to deactivate this robot about to destroy the world, well in my version it launches a missile… i finished the sequence part of it…
once again tahtnks for yoru great tutorials!