Css jquery加载动画问题

我试图隐藏菜单，显示动画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'
                    });
                }
            });
    }

---

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

它不会显示，因为您正在延迟一些不可排队的动画：

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

---

它不会显示，因为您正在

delay

处理非可排队动画的内容：

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

---

您正在添加，一旦数据已经收到，就从元素中删除加载类。您应该使用ajaxStart和ajaxStop函数来完成此操作，该函数最终会在发送请求之前添加加载类，并在ajax操作完成后删除

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

---

您正在添加，一旦数据已经收到，就从元素中删除加载类。您应该使用ajaxStart和ajaxStop函数来完成此操作，该函数最终会在发送请求之前添加加载类，并在ajax操作完成后删除

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

你装错东西了 您的加载类应在发送请求之前添加，然后在发送请求之后删除。您正在添加它（正如roXon指出的那样，错误地使用了.delay函数），然后再次删除它，没有给它任何显示时间

试试这样的

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

你装错东西了 您的加载类应在发送请求之前添加，然后在发送请求之后删除。您正在添加它（正如roXon指出的那样，错误地使用了.delay函数），然后再次删除它，没有给它任何显示时间

试试这样的

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