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 に答える