Question

I’m trying to hide the menu, show animated gif, hide gif, return updated menu.
The menu disappears and reappears, but the animated gif won’t show.

What am I doing wrong?

$(document).ready(function () {

    $("#menu").wijmenu({
        orientation: 'vertical'
    });

    $("#TDButtons a").click(function () {
        var href = $(this).attr("href");
        $('#menuAjax').hide(0, LoadAjaxContent(href));
        return false;
    });

    function LoadAjaxContent(href) {

        $.ajax({
                url: href,
                success: function (data) {
                    $("#menuAjax").html(data)
                        .addClass("loading")
                        .delay(5000)
                        .removeClass("loading")
                        .fadeIn('slow');

                    $("#menu").wijmenu({
                        orientation: 'vertical'
                    });
                }
            });
    }

Please let me know if you need more info. Thanks

Answer 1

You are adding, removing the loading class from the element once the data is already received. You should do it with ajaxStart and ajaxStop function which eventually adds the loading class before the request is send and removes once the ajax operation is completed.

$(document).ready(function () {

    $("#menu").wijmenu({
        orientation: 'vertical'
    });

    $("#TDButtons a").click(function () {
        var href = $(this).attr("href");
        $('#menuAjax').hide(0, LoadAjaxContent(href));
        return false;
    });


    $.ajaxStart(function(){
         $("#menuAjax").addClass("loading");
    });
    $.ajaxStop(function(){
         $("#menuAjax").removeClass("loading");
    });
    function LoadAjaxContent(href) {

        $.ajax({
                url: href,
                success: function (data) {
                    $("#menuAjax").html(data)
                        .delay(5000)
                        .fadeIn('slow');

                    $("#menu").wijmenu({
                        orientation: 'vertical'
                    });
                }
            });
    }