0

ページの一部に、成功のコールバックで返される html を設定する ajax 呼び出しがあります。

function LoadCurrentCourses(masterKey, status) {
status = 'S';
$.ajax({
    type: "GET",
    url: "/Home/LoadCurrentCourses/?masterKey=" + masterKey + "&status=" + status,
    dataType: "html",
    success: function (evt) {
        $('#currentCourses').fadeIn(1500, function () { $('#currentCourses').html(evt) });
    },
    error: function (req, status, error) {
        $('#currentCourses').html("<p>Error occured retrieving current courses</p>");
    }
});

}

#currentCourses マークアップには、ヘッダーがあり、そこに .gif がロードされているだけです。

<div class="span4 moduleBox" id="currentCourses">
    <h2>Current Courses</h2>
    <img style="margin-left: 45%; margin-top: 5%; margin-bottom: 5%;" src="~/Images/11.gif" />
</div>

ajax は、doc.ready() のメイン ページから呼び出されています。

    <script>
    $(document).ready(function () {
        var masterKey = '@Model.MasterKey';

        //load degree overview
        LoadCurrentCourses(masterKey);

    });
</script>

私がやろうとしているのは、データが返されることです.htmlがメインページにゆっくりとフェードインし、gifとヘッダーを置き換えます. 今のところ問題なく動作し、すべてがロードされ、置き換えられますが、jQuery .fadein() メソッドをどこに配置すればよいかわかりません。

何か案は？

4

2 に答える 2

4

フェードインする前にテキストをロードする必要があります

success: function (evt) {
    $('#currentCourses').html(evt);
    $('#currentCourses').fadeIn(1500);
},

また、フェードインする前にコンテナをフェードアウトまたは非表示にする必要がある場合もあります。そうしないと、何もせずに新しいデータをロードするだけのように見えます。

于 2013-04-08T15:13:49.533 に答える