css - jquery加载动画问题

Question

我正在尝试隐藏菜单、显示动画 gif、隐藏 gif、返回更新的菜单。菜单消失并重新出现，但 gif 动画不会显示。

我做错了什么？

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

如果您需要更多信息，请告诉我。谢谢

Answer 1

它不会显示您延迟非排队动画的原因:

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

解释如下:

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

你可以这样做:

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