Ajax content and jQuery animation erfects

Question

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 th

Answer 1

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);