CODEWITHSUNDEEP
cssjquery
dright
dright

Reputation: 653

jquery loading animation issue

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

Upvotes: 1

Views: 333

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206525

It doesn't show cause you are delaying something that isn't a queueable animation:

.addClass("loading")
.delay(5000)
.removeClass("loading")
.fadeIn('slow');

is interpreted like:

.addClass("loading")
.removeClass("loading")
.delay(5000)
.fadeIn('slow');

You could do:

function LoadAjaxContent(href) {
    $.ajax({
          url: href,
          success: function (data) {
              $("#menuAjax").html(data).removeClass("loading").fadeIn('slow');
              $("#menu").wijmenu({ orientation: 'vertical' });
          }
    });
}

$("#TDButtons a").click(function (e) {
    e.preventDefault();
    var href = this.href;
    $('#menuAjax').addClass("loading").hide();
    LoadAjaxContent(href);
});

Upvotes: 2

lededje
lededje

Reputation: 1869

You have your loading the wrong way round

Your class of loading should be added before the request is sent, and then removed after. You are adding it, (and as roXon pointed out using the .delay function incorrectly) and then removing it again, not giving it any time to be shown.

Try something like this

$(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) {
    $("#menuAjax").addClass("loading")
    $.ajax({
            url: href,
            success: function (data) {
                $("#menuAjax").html(data)
                    //.delay(5000) Not needed!
                    .removeClass("loading")
                    .fadeIn('slow');

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

Upvotes: 1

Tariqulazam
Tariqulazam

Reputation: 4585

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

Upvotes: 1

Related Questions