4

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

我正在使用动画来突出显示 AJAX 数据刷新。然而，当大多数时候刷新时间不到半秒时，这有点突兀。我想淡入动画。

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

所以我们有代码：

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

我尝试了很多方法，例如将其他参数放入添加类 addClass("loading",500) addClass("loading",500,500)

并把 .fadeIn(500); 在许多地方，但似乎没有任何区别。

如何淡入 DIV？

4

3 回答 3

4

使用 jQuerydelay()让你的.modal元素淡入淡出。

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

这相当于：$.ajaxStart(function () { $('.modal').delay(500).fadeIn(); }); jQuery 将在淡入之前等待半秒。如果请求在延迟内完成，$.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 回答
0

你可以这样做：

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)取消所有正在运行或排队的事件和动画。

于 2016-06-14T14:16:36.683 回答