淡入阿贾克斯开始动画

问题描述：

按照我在这里问的问题是： Ajax Animation JQuery 1.9.2 淡入阿贾克斯开始动画

我使用动画来突出AJAX数据刷新。然而，当大部分时间刷新不到半秒钟时，这有点突兀。我想淡出动画

这里是由以前的答案提供的最新小提琴： DEMO

因此，我们必须代码：

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

我已经尝试了数的东西，如把附加paramters到加载类 addClass（ “加载”，500） addClass（ “加载”，500500）

和丘比特ng .fadeIn（500）; 在许多地方，但它似乎没有任何区别。

如何淡入DIV？

请参阅http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles – noj 2013-03-28 09:38:50

答

使用jQuery的delay()并使您的.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-28 10:02:26

答

你需要真正消失模态在

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.

答

你可以这样来做：

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

淡入阿贾克斯开始动画

相关推荐