Okay so, as the title may suggest, I'm trying my hand at using the MooTools 1.2 framework.
What I want to do:
What happens instead
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.
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.
What I want to do:
- Fade out the content div
- Use an ajax request to put in new content
- Fade the content div back in
What happens instead
- 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.