Reputation: 8385
So I am trying to animate .load('content.html')
function by doing this.
function loadContent(c) {
$('#main-container').stop().animate({
opacity: 0,
}, 300, function() {
$('#main-container').load('./content/' + c + '.html');
$(this).stop().animate({
opacity: 1,
}, 600);
});
}
It is pretty straight forward, I want to animate opacity to 0
, load new content and animate opacity back to 1
. The problem is that content loads immediately after function is called so content changes before 'opacity 0'
happens. I tried also this piece of code
function loadContent(c) {
$('#main-container').stop().animate({
opacity: 0,
}, 300, function() {
setTimeout(function() {
$('#main-container').load('./content/' + c + '.html');
}, 600);
$(this).stop().animate({
opacity: 1,
}, 600);
});
}
But it is same result. Any hints?
I think it has something to do with .animation()
event being asynchronous.
Both codes above, and both answers work just fine I had typo in my code (as whole) so I was calling .load()
function before loadContent(c)
itself, result was that content loaded immediately, animation started -> content loaded second time -> animation ended.
Upvotes: 2
Views: 558
Reputation: 7484
how about:
function loadContentCOMMAS(c) {
$('#main-container').stop().animate({
opacity: 0
}, 300);
$('#main-container').promise().done(function () {
$('#main-container').load(c,function () {;
$(this).stop().animate({
opacity: 1
}, 600);
});
});
}
EDIT:
here is a FIDDLE
Upvotes: 0
Reputation: 1387
You need to pass your last animation as a callback function to load()
:
function loadContent(c) {
$('#main-container').stop().animate({
opacity: 0
}, 300, function() {
$('#main-container').load('./content/' + c + '.html', function() {
$(this).stop().animate({
opacity: 1
}, 600);
});
});
}
Here's a Fiddle: http://jsfiddle.net/Lp728/
Upvotes: 1