Darko Darko - 4 months ago 11
jQuery Question

Ajax content and jQuery animation erfects

I'm trying to make Ajax content for WordPress posts to appear using jQuery animation effects, the problem is that the first animation - in this case "fadeOut" works OK but the second one "FadeIn" or whatever i try to use, has no effect on the new content, the loaded content just appears without any effect.

Here's the code I used:

$.ajaxSetup({
cache: false
});
$('.post-link').click(function () {

var toLoad = $(this).attr('href');
$('#our_team').fadeOut('500', loadContent);
$('#load').remove();
$('#ajax-post-content').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');

function loadContent() {
$('#ajax-post-content').load(toLoad, showNewContent())
}

function showNewContent() {
$('#ajax-post-content').fadeIn('1000', hideLoader());
}

function hideLoader() {
$('#load').fadeOut('normal');
}
return false;

});

Answer

You have to pass a function reference without parens so change this:

function loadContent() {
    $('#ajax-post-content').load(toLoad, showNewContent())
}

function showNewContent() {
    $('#ajax-post-content').fadeIn('1000', hideLoader());
}

to this:

function loadContent() {
    $('#ajax-post-content').load(toLoad, showNewContent)
}

function showNewContent() {
    $('#ajax-post-content').fadeIn('1000', hideLoader);
}

When you try to pass it with parens, it just executes it immediately and passes the return value from calling the function which is undefined so that isn't what you want. When you pass just the function name without the parens, that is a function reference that the host function can then call sometime later.

FYI, you were already doing it correctly here:

$('#our_team').fadeOut('500', loadContent);
Comments