1

divの内容をajaxで変更したいのですが、非表示にする前に、変更後にjQueryアニメーションで表示します。

私の現在のコード:

$(document).on("click", ".menuItem", function(){
    var contentName = $(this).attr("name");
    $( "#content > div" ).hide(1000, function(){
        $.ajax({ type: "GET",
            url: contentName,
            dataType: 'html',
            success : function(responseText){
                $("#content").html(responseText);
                $("#content").show(1000);
            }
        });
    });
});

しかし、html メソッドが呼び出されると、新しいコンテンツが突然表示されるため、機能していません。この問題を解決する方法はありますか?

前もって感謝します！

リチャード

4

3 に答える 3

3

これを試して

$(document).on("click", ".menuItem", function(){
    var contentName = $(this).attr("name");
    $( "#content > div" ).hide(1000, function(){
        $.ajax({ type: "GET",
            url: contentName,
            dataType: 'html',
            success : function(responseText){
                $("#content").hide().html(responseText).show(1000);
            }
        });
    });
});
于 2013-02-05T10:11:59.197 に答える
3

ここでの問題は、$("#content")要素が常に表示されていることです。ajax 呼び出しの前に、内部に div を隠しています#content-> $("#content > div")。

$("#content")コンテンツを追加する前に非表示にすることができます。

$("#content").hide().html(responseText).show(1000);

また

    $("#content").hide(1000, function(){
        $.ajax({ type: "GET",
            url: contentName,
            dataType: 'html',
            success : function(responseText){
                $("#content").html(responseText).show(1000);
            }
        });
    });
于 2013-02-05T10:10:06.767 に答える
0

最初にコンテンツを非表示にすることができます:

$(document).on("click", ".menuItem", function(){
    var contentName = $(this).attr("name");
    $("#content > div" ).hide(1000, function(){
        $.ajax({ type: "GET",
            url: contentName,
            dataType: 'html',
            success : function(responseText){
                $("#content").hide();
                $("#content").html(responseText);
                $("#content").show(1000);
            }
        });
    });
});
于 2013-02-05T10:10:57.780 に答える