Anyone work with MooTools?

Oneos

Gawd
Joined
Sep 14, 2004
Messages
596
Okay so, as the title may suggest, I'm trying my hand at using the MooTools 1.2 framework.

What I want to do:
  1. Fade out the content div
  2. Use an ajax request to put in new content
  3. Fade the content div back in

What happens instead
  1. Pretty much skips to the request, putting in the new content with no fading effects

I've tried various things, and I am now using "chain", but that doesn't seem to help much. I tried calling each effect from the other, but couldn't get that going (or it's just the same thing, can't quite remember). I've also tried doing them in a setTimeout(), but then it pretty much plain doesn't work.

Here's my current JavaScript, any help is appreciated.

Code:
window.addEvent('domready', function() {
	var content = $('content');

	function loadPage(link)
		{
		var req = new Request.HTML({
			method: 'get',
			url: $(link).get('href'),
			data: { 'do' : '1' },
			update: content,
			});
			
		
		var loadChain = new Chain();
			loadChain.chain(
				function() { content.fade('out'); },
				function() { req.send(); },
				function() { content.fade('in'); }
				);
				
			loadChain.callChain();
			loadChain.callChain();
			loadChain.callChain();
		}

		
	$('home').addEvent('click', function(event) {
		event.stop();

		loadPage('home');
		}); //click end
	}); //domready end


EDIT: I've managed a similar effect using jQuery on a previous project, by fading out then loading a new page (not using any AJAX), but I'd like to use this as a learning experience.
 
Got help from the mooTools IRC. Here's the solution I got:

Code:
window.addEvent('domready', function() {
	var content = $('content');
	var fader = new Fx.Tween(content);
	
	function loadPage(link)
	{
		var req = new Request.HTML({
			method: 'get',
			url: $(link).get('href'),
			data: { 'do' : '1' },
			update: content,
			onSuccess: function(){
				fader.start('opacity',1);
			}
		});
		
		fader.start('opacity',0).chain(function(){ req.send(); });
	}

		
	$('home').addEvent('click', function(event) {
		event.stop();

		loadPage('home');
	}); //click end
}); //domready end
 
Back
Top