Question

根据我在这里提出的问题： Ajax Animation JQuery 1.9.2

我正在使用动画突出显示AJAX数据刷新。然而，当大部分时间刷新不到半秒时，它有点突兀。我想淡化动画。

这是上一个答案提供的更新小提琴： DEMO

所以我们有代码：

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

我尝试了很多东西，例如在add类中添加其他参数 addClass（ “加载”，500） addClass（ “加载”，500500）

并放入.fadeIn（500）; 在许多地方，但它似乎没有任何区别。

我怎样才能淡化DIV？

Answer 1

使用jQuery的delay()并让您的.modal元素淡入和淡出。

以下是您的小提琴的更新版本：http://jsfiddle.net/gk3RL/1/。

相当于：$.ajaxStart(function () { $('.modal').delay(500).fadeIn(); }); jQuery将在淡入之前等待半秒。在$.ajaxStop中，如果请求在延迟内完成，您可能需要执行stop()以防止延迟fadeIn被触发。 / p>

不幸的是，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();
});

Answer 2

你需要实际淡化模态。

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
});

Here's the fiddle.

Answer 3

你可以这样做：

function startAjaxLoader() {
    $("#ajaxLoader").delay(500).fadeIn(750);
}

function stopAjaxLoader() {
    $("#ajaxLoader").stop(true).hide();
}

$(document).ajaxStart(function() {
    startAjaxLoader();
}).ajaxComplete(function() {
    stopAjaxLoader();
}).ajaxError(function(ajaxErrorEvent, jqXHR) {
    stopAjaxLoader();
    // Display error
});

方法.stop(true)取消所有正在运行或排队的事件和动画。

淡入Ajax开始动画

3 个答案: