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

Answer 2

Here is an complete example:
- HTML

<table>
    <thead>
        // Your static content
    </thead>
    <tbody>
        // Your AJAX loaded content
    </tbody>
</table>

- JS

$(document).ready(function()
{
    function ajax_request() {
        $.ajax({ 
            //ajax request
        });
    }

    // for when the page first loads
    ajax_request();

    $('#your_trigger').change(function()
    {
        $('table tbody').hide('fast',load_content);
        $('#load').remove();
        $('table tbody').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('fast');

        function load_content() {
            ajax_request();
            show_new_content();
        }
        function show_new_content() {
            $('table tbody').show('fast',hideLoader());
        }
        function hide_loader() {
            $('#load').fadeOut('fast');
        }

    });

});

Answer 3

edit your appended span to this

('<span id="load" style="display:none">... 

or you can hide it with javascript

$('#load').hide();
// your fade in is after this hide thing

it's not doing any effect because fadeIn shows a hidden element with an effect, so if it already is shown there is nothing to fade-in