Question

I got the delay to work when you click on the buttons but I cant get the loading gif to display during the delay.

Thanks

function () {
    $('.sectionThreeTab:not(.tabActive)').click(function () {
        $('ajax-loader.gif').bind('ajaxStart', function () {
            $(this).show();
        }).bind('ajaxStop', function () {
            $(this).hide();
        });
        $('.tabActive').removeClass('.tabActive');
        $(this).addClass('tabActive');
        var lesson = $(this).attr('lesson');
        var self = $(this);
        setTimeout(function () {
            $.ajax({
                type: "GET",
                url: 'lessons/' + lesson + '.htm',
                datatype: "json",
                success: function (data) {
                    $('#sectionTabContent').append(data);
                }
            })
        }, 3000);
        return false;
    });
}

Answer 1

You can try this instead of what you have:
Delete this part:

$('ajax-loader.gif').bind('ajaxStart', function () {
            $(this).show();
        }).bind('ajaxStop', function () {
            $(this).hide();
        });

And change the setTimeout to this:

setTimeout(function () {
            $("#loading").show();
            $.ajax({
                type: "GET",
                url: 'lessons/' + lesson + '.htm',
                datatype: "json",
                success: function (data) {
                    $('#sectionTabContent').append(data);
                },
                complete: function() {
                    $("#loading").hide();
                }
            })
        }, 3000);

Please also post your html so we can see if everything else is in order.

Edit:

<div id="loading" class="grayBackground withBorder10" style="display:none"> 
<img alt="Loading..." src="img/ajax-loader.gif" />
</div>