1

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

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

4

3 回答 3

2

它没有显示，因为您正在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);
});
于 2012-10-17T22:33:12.800 回答
1

一旦收到数据，您将添加、删除元素中的加载类。您应该使用 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'
                    });
                }
            });
    }
于 2012-10-17T22:35:33.453 回答
1

您的加载方式错误

您的加载类应该在发送请求之前添加，然后在之后删除。您正在添加它，（正如 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'
                });
            }
        });
}
于 2012-10-17T22:35:37.557 回答