4

私がここで尋ねた質問に従って: Ajax Animation JQuery 1.9.2

アニメーションを使用して、AJAX データの更新を強調しています。ただし、ほとんどの場合、リフレッシュにかかる時間が 0.5 秒未満の場合は、少し目障りです。アニメーションをフェードインしたい。

前の回答で提供された更新されたフィドルは次のとおりです: DEMO

コードは次のとおりです。

$(document).ajaxStart(function () {
    $("body").addClass("loading");
});
$(document).ajaxStop(function () {
    $("body").removeClass("loading");
});

addClass("loading",500) addClass("loading",500,500) addClass("loading",500) に追加のパラメーターを入れるなど、いくつかのことを試しました

そして .fadeIn(500); を入れます。いろいろなところにありますが、特に問題はないようです。

DIV をフェードインするにはどうすればよいですか?

4

3 に答える 3

4

jQuery を使用delay()して、.modal要素をフェードインおよびフェードアウトさせます。

フィドルの更新版は次のとおりです: http://jsfiddle.net/gk3RL/1/。

つまり、$.ajaxStart(function () { $('.modal').delay(500).fadeIn(); }); jQuery はフェードインを行う前に 0.5 秒待機します。リクエストが遅延内に終了した場合、遅延が発生$.ajaxStopしないようにする必要がある場合があります。stop()fadeIn

残念ながらdelay()キャンセルはできません。したがって、おそらく最も堅牢な解決策は、JavaScript 独自の を使用することです。setTimeoutこれは、 を呼び出すことでキャンセルできますclearTimeout。

したがって、次のようにします。

var timeOut;

$.ajaxStart(function () {
    timeOut = setTimeout(function () {
        $('.modal').fadeIn();
    }, 500); // Waits for half a second before fading .modal in
});

$.ajaxStop(function () {
    clearTimeout(timeOut); // Cancels if request finished < .5 seconds
    $('.modal').fadeOut();
});
于 2013-03-28T09:42:09.323 に答える
1

実際にモーダルをフェードインする必要があります。

CSS:

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
 .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
 body.loading {
    overflow: hidden;
}

Javascript:

$(document).ajaxStart(function () {
    $("body").addClass("loading");
    $('.modal').fadeIn(500);
});
$(document).ajaxStop(function () {
    $("body").removeClass("loading");
    $('.modal').fadeOut(500);
});

// Initiates an AJAX request on click
$(document).on("click", function () {
    $.post("/mockjax");
});


// http://code.appendto.com/plugins/jquery-mockjax
$.mockjax({
    url: '/mockjax',
    responseTime: 2000
});

これがフィドルです。

于 2013-03-28T09:43:40.073 に答える